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图 灵 社 区 的 电子 书 没有 采用 专 有 客 
户 端 ， 您 可 以 在 任意 设备 上 ， 用 自 
己 喜 欢 的 浏览 器 和 PDF 阅读 器 进行 
阅读 。 

但 您 购买 的 电子 书 仅 供 您 个 人 使 用 ， 
未 经 授权 ， 不 得 进行 传播 。 

我 们 愿意 相信 读者 具有 这 样 的 良知 
和 觉悟 ， 与 我 们 共同 保护 知识 产权 。 


如 果 购 买 者 有 侵权 行为 ， 我 们 可 能 
对 该 用 户 实施 包括 但 不 限于 关闭 该 
帐号 等 维权 措施 ， 并 可 能 追究 法 律 
责任 。 
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州 卫斯理 大 学 副教授 ， 自 2005 年 以 来 一 直 讲授 
交互 设计 。 他 重视 最 佳 实践 ， 不 喜欢 走 捷径 ， 
推崇 Web 标 准 。2012 年 ，David 在 webde- 
sign.tutsplus.com.E7Fi€ f Bootstrap 2.0 系 列 
教程 专栏 。 他 还 在 Packt Publishing 出 版 过 一 本 
小 书 Twitter Bootstrap Web Development 
How-To。 闲 暇 时 间 ，David 会 在 自己 的 网 站 
alittlecode.com 上 写 写 博客 。 他 还 是 媒体 、 设 
计 和 咨询 公司 BitBrilliant 的 负责 人 。 
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年 ， 他 对 Web 开 发 产生 了 浓厚 兴趣 ， 并 投身 其 
中 。 他 很 早 就 开始 使 用 Twitter Bootstrap， 而 
且 在 David Cochran 帮 助 下 很 快 就 掌握 了 这 个 杠 
架 ， 并 将 其 应 用 到 了 很 多 项 目 中 。 目 前 ， 他 多 
数 情况 下 会 使 用 Bootstrap 为 客户 创建 Word- 
Press 模 板 。lan 是 BitBrilliant 公 司 开发 主管 。 
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设计 ”，3 月 应 邀 在 奇 虎 360 分 享 “JS 的 国 ”。 
在 2014 DevFest Beijing 分 享 了 “理解 响应 式 
Webi&it" . 








LL n 
>- -— ™ oy e) - = ee 
- ——- -N z -—— 一 





Dootstraps 


Bootstrap Site Blueprints 


[3$] David Cochran # 李 松 峰 X 
lan Whitley 


人 民 邮 电 出 版 社 
北 x 


图 书 在 版 编目 (C I P ) 数据 


Bootstrap 实 战 / ( 美 )》 科 克 伦 (Cochran,D.) , 
( 美 ) BA) (Whitley, I.) 3E ; 李 松 峰 译 . — 北京 : 
人 民 邮 电 出 版 社 ，2015. 5 
(图 灵 程 序 设计 从 书 》 
ISBN 978-1-115-38881-2 


I. QB-- I Ofke ORe OF 贡 ， 包 网 页 制 
作 工 具 IV. QDTP393. 092 






























































司 版 本 图 书馆 CIP 数 据 核 字 (2015) 第 072099 号 

















内 容 提要 


Bootstrap 是 前 端 开发 中 应 用 非常 广泛 的 一 个 框架 ， 最 早 是 Twitter 公司 内 部 的 一 个 工具 ， 开 源 之 后 迅 
速 得 到 了 各 方 的 认可 。 本 书 基 于 最 新 的 Bootstrap 3 撰写 ， 在 简单 介绍 了 安装 与 配置 之 后 就 直 奔 主题 ， 分 别 
讨论 了 个 人 作品 站 点 、WordPress 主题 、 企 业 网 站 、 电 子 商 务 网 站 和 单 页 营销 网 站 等 几 个 最 具 代 表 性 的 应 
用 案例 ， 结 合 这 些 案例 细致 地 剖析 了 Bootstrap 还 有 LESS 的 使 用 方式 和 技巧 。 

本 书 适合 所 有 前 端 开 发 人 员 及 个 人 网 站 设计 者 阅读 参考 。 
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2011 年 8 H, Twitter Bootstrap 横 空 出 世 。 如 今 ， 这 个 被 称 为 Bootstrap 的 框架 ， 癸 然 已 成 
为 前 端 设 计 领 域 最 受 欢迎 的 辅助 技术 。Bootstrap 3 又 是 一 个 里 程 碑 式 的 版 本 ， 增 加 了 移 
动 优先 的 响应 式 网 格 、 新 的 强大 的 LESS 混入 , 而 且 还 针对 现代 浏览 器 对 核心 代码 进行 了 
优化 。 

本 书 详细 介绍 Bootstrap 的 使 用 方法 。 全 书简 明 易 懂 ， 循 序 渐进 ， 让 读者 时 时 处 处 体验 到 
自 定义 和 重 编译 Bootstrap 的 LESS 文件 的 强大 威力 ,同时 掌握 应 用 Bootstrap 的 JavaScript 
插件 设计 专业 用 户 界面 的 技巧 。 

这 本 书 并 不 局 限于 Bootstrap。Bootstrap 只 是 一 个 工具 ， 一 个 达到 目标 的 手段 。 学 习 完 这 
本 书 之 后 ， 读 者 将 成 为 一 位 更 加 高 效 、 熟 练 的 Web 设计 师 。 












































本 书 内 容 


第 1 章 “ 初 识 Bootstrap”， 教 给 大 家 如 何 下 载 Bootstrap ， 如 何 基 于 HTMLS Boilerplate 设 
置 站 点 模板 ， 并 且 掌 握 把 Bootstrap 的 LESS 文件 编译 为 CSS 的 方法 。 

第 2 章 “ 作 品 展示 站 点 ”， 开 始 学 习 创 建 简单 的 个 人 作品 展示 网 站 ， 包 括 全 宽 的 传送 带 切 
换 效果 ， 三 栏 文本 布局 ， 以 及 使 用 Font Awesome 的 字体 图 标 一 一 通过 自 定义 Bootstrap 
的 LESS 文件 。 

第 33€ "WordPress 主题 ”， 学 习 把 第 2 章 的 个 人 作品 展示 站 点 转换 成 一 个 WordPress X 
题 。 这 一 章 要 利用 有 名 的 Roots Theme， 根 据 我 们 的 需要 ， 还 会 涉及 自 定义 模板 文件 、 
LESS, CSS 和 JavaScript。 

第 4 章 “ 企 业 网 站 ”， 将 通过 创建 一 个 企业 级 网 站 学 习 如 何 创建 复杂 的 页 头 区 ， 添 加 下 拉 
菜单 和 实用 导航 ， 以 及 构建 复杂 的 三 栏 布局 和 四 栏 页 脚 ， 同 时 还 要 确保 所 有 这 些 内 容 具 
有 完全 的 响应 能 力 。 

第 $ 章 “电子 商务 网 站 ”， 带 领 大 家 探索 商品 展示 页 面 的 设计 ， 学 会 在 复杂 的 响应 式 网 格 
中 控制 多 行商 品 。 与 此 同时 ， 还 要 实现 一 个 响应 式 的 商品 筛 选 工具 。 


第 6 章 “ 单 页 营销 网 站 ”， 这 一 音 教 给 大 家 构建 时 尚 的 单 页 营销 网 站 ,包括 带 高 清 图 的 大 
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字 欢 迎 语 、 带 大 图 标的 商品 功能 列表 、 图 片 墙 式 的 用 户 评论 区 ， 以 及 三 个 精美 的 价目 表 ， 
最 终 完 成 一 个 支持 动态 滚动 导航 的 漂亮 的 单 页 网 站 。 

附录 A“ 优 化 站 点 资源 "， 以 第 2 章 的 网 站 资源 为 例 ， 介 绍 了 为 最 终 部 署 网 站 而 优化 
Bootstrap LESS/CSS 及 JavaScript 等 静态 资源 的 基本 流程 和 工具 。 这 个 附录 对 所 有 Bootstrap 
项 目 都 一 样 有 用 。 

附录 B“ 实 现 响应 式 图 片 ”， 介 绍 最 前 沿 的 响应 式 图 片 解决 方案 Picturefll， 仍 然 以 第 2 章 
项 目 中 的 作品 图 片 传送 带 为 例 。 这 个 附录 对 其 他 项 目 也 一 样 有 用 。 

附录 C“ 让 传送 带 支 持 手 势 "， 介 绍 在 Bootstrap 的 传送 带 中 使 用 一 款 先 进 的 插件 Hammerjs， 
实现 传送 带 图 片 的 轻 扫 切换 功能 。 



































本 书 要 求 
要 完成 本 书 各 章 的 项 目 ， 需 要 安装 下 列 软件 : 
口 现代 浏览 器 (包括 Internet Explorer 8 及 以 上 版 本 ); 


a 代码 编辑 器 ; 
O LESS 编译 器 ， 其 less.js 的 版 本 至 少 是 1.3.3。 








读者 对 象 
本 书 适 合 已 经 熟练 掌握 HTML 和 CSS 基础 的 读者 ， 最 好 是 熟悉 规范 的 HTML5 和 样式 表 
的 写法 。 了 解 JavaScript 的 基本 知识 ， 包 括 Bootstrap 的 jQuery 插件 用 法 更 好 。 本 书 经 常 
会 涉及 自 定义 LESS 文件 ,因此 熟悉 LESS 的 读者 会 感觉 更 轻松 一 些 。 不 过 ， 即 便 从 来 没 
有 使 用 过 LESS， 本 书 由 浅 入 深 的 介绍 ， 也 会 让 你 顺利 入 门 。 























本 书 约定 
本 书 正文 中 会 涉及 很 多 种 版 式 ， 以 区 分 不 同 的 信息 。 以 下 是 这 些 版 式 的 解释 。 
正文 中 的 代码 将 以 代码 体 印刷 ， 比 如 : 


«FilesMatch "\.(ttf|otf|eot|woff)$"> 
«IfModule mod headers.c> 
Header set Access-Control-Allow-Origin "*" 
</IfModule> 
</FilesMatch> 


新 术语 和 重要 的 词汇 将 以 楷体 印刷 。 截 屏 、 对 话 框 或 菜单 中 的 词汇 ， 会 保留 英文 原文 。 
比如 ,“ 请 单 击 Download 按钮 ”。 
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| sc 这 个 图 标 表示 警告 或 需要 特别 注意 的 内 容 。 | 
| 这 个 图 村 表示 提示 或 技巧。 | 


读者 反馈 
欢迎 提出 反馈 ， 你 对 本 书 有 任何 想法 ， 喜 欢 它 什么 ， 不 喜欢 它 什 么 ， 请 让 我 们 知道 。 要 
写 出 真正 对 大 家 有 帮助 的 图 书 ， 读 者 的 反馈 很 重要 。 
一 般 的 反馈 ， 请 发 送 电子 邮件 至 feedback@packtpub.com， 并 在 邮件 主题 中 包含 书 名 。 
如 果 你 有 某 个 主题 的 专业 知识 ， 并 且 有 兴趣 写成 或 帮助 促成 一 本 书 ， 请 参考 我 们 的 作者 
指南 http://www.packtpub.com/authors。 











客户 支持 
现在 , 你 是 一 位 令 我 们 自豪 的 Packt 图 书 的 拥有 者 , 我 们 会 尽 全 力 帮 你 充分 利用 你 手中 的 书 。 











下 载 示例 代码 ? 
你 可 以 用 你 的 账户 从 http://www.packtpub.com 下 载 所 有 已 购买 Packt 图 书 的 示例 代码 文 
件 。 如 果 你 从 其 他 地 方 购买 本 书 ， 可 以 访问 http:/www.packtpub.com/support 并 注册 ， 我 
们 将 通过 电子 邮件 把 文件 发 送 给 你 。 











ERR? 
虽然 我 们 已 尽力 确保 本 书 内 容 正确 ， 但 出 错 仍旧 在 所 难免 。 如 果 你 在 我 们 的 书 中 发 现 错 
误 ， 不 管 是 文本 还 是 代码 ， 和 希望 能 告知 我 们 ， 我 们 不 胜 感激 。 这 样 做 ， 你 可 以 使 其 他 读 
者 免 受挫 败 ， 帮 助 我 们 改进 本 书 的 后 续 版 本 。 如 果 你 发 现任 何 错误 ， 请 访问 
http://www.packtpub.com/submit-errata 提交 ， 选 择 你 的 书 ， 点 击 勘误 表 提 交 表 单 的 链接 ， 

并 输入 详细 说 明 。 勘 误 一 经 核实 ， 你 的 提交 将 被 接受 ， 此 勘误 将 上 传 到 本 公司 网 站 或 添 
加 到 现 有 勘误 表 。 从 http:/www.packtpub.com/support 选择 书 名 就 可 以 查看 现 有 的 勘误 表 。 




























































































读者 可 以 直接 访问 本 书 中 文 版 页 面 ， 下 载 本 书 项 目的 源 代码 : http://ituring.cn/book/1418。 一 一 编者 注 
@ 对 中 文 版 的 勘误 ， 请 读者 直接 到 本 书 中文 版 页 面 提交 : http://ituring.cn/book/1418。 一 一 编者 注 
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侵权 行为 
版 权 材 料 在 互联 网 上 的 盗版 是 所 有 媒体 都 要 面 对 的 问题 。Packt 非常 重视 保护 版 权 和 许可 
证 。 如 果 你 发 现 我 们 的 作品 在 互联 网 上 被 非法 复制 ， 不 管 以 什么 形式 ， 都 请 立即 为 我 们 
提供 位 置地 址 或 网 站 名 称 ， 以 便 我 们 可 以 寻求 补救 。 
请 把 可 疑 盗版 材料 的 链接 发 到 copyright@packtpub.com。 
非常 感谢 你 帮助 我 们 保护 作者 ， 以 及 保护 我 们 给 你 带 来 有 价值 内 容 的 能 















































如 果 你 对 本 书 内 容 存 有 疑问 , 不 管 是 哪个 方面 , 都 可 以 通过 questions@packtpub.com 联系 
我 们 ， 我 们 将 尽 最 大 努力 来 解决 。 
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1.1 


初 识 Bootstrap 


作为 Web 前 端 开发 框架 ，Bootstrap 的 流行 很 容易 理解 。 它 为 大 多 数 标准 的 UI 设计 场景 
提供 了 用 户 友好 、 跨 浏览 器 的 解决 方案 。 它 现成 可 用 旦 经 受 了 社区 考验 的 HTML 标记 、 
CSS 样式 及 JavaScript 行为 的 组 合 ， 极 大 提高 了 Web 前 端 界面 的 开发 效率 ,创造 了 令 人 
愉悦 效果 。 有 了 这 些 基 本 的 元 素 ， 开 发 人 员 就 有 了 构建 自己 定制 方案 的 坚实 基础 。 

不 过 ， 流 行 、 高 效 、 有 效 也 不 一 定 都 是 好 事 。 由 于 工具 便捷 而 导致 人 们 养 成 坏 习 惯 的 例 
子 屡见不鲜 。 然 而 ，Bootstrap 却 没有 这 个 问题 ， 至 少 不 一 定 存在 这 个 问题 。 从 它 面世 就 
一 直 关 注 它 的 人 都 知道 , 它 的 早期 版 本 和 更 新 有 时 候 会 更 侧重 实际 效率 ， 而 非 最 佳 实践 。 
事实 上 ， 一 些 最 佳 实践 不 管 是 语义 标记 还 是 移动 优先 的 设计 ， 抑 或 资源 性 能 优化 ， 都 需 
要 额外 的 时 间 和 精力 才能 实现 。 



































数量 和 质量 


运用 得 当 的 情况 下 , RUN Bootstrap 无 论 从 质量 还 是 效率 角度 说 , 都 是 Web 开发 社区 的 
一 大 福利 。 随 着 越 来 越 多 的 开发 者 使 用 这 个 框架 ， 越 来 越 多 的 人 也 加 入 了 这 个 社区 ， 从 
而 逐步 接受 了 前 沿 的 最 佳 实践 。 Bootstrap 从 一 开始 就 鼓励 可 靠 .成 熟 的 及 面向 未 来 的 CSS 
方案 ,比如 Nicholas Galagher 的 Normalize.css 和 用 CSS3 方案 解决 图 片 过 多 的 问题 。 此 外 ， 
它 也 支持 HTMLS 语义 标记 。 
































与 时 俱 进 
Bootstrap v2.0 发 布 之 后 , 响应 式 设 计 随 之 成 为 主流 , 其 界面 元 素 也 做 到 了 跨 设 备 响 应 ( 包 
插 桌 面 、 平 板 和 手机 )。 
现在 ，Bootstrap v3.0 也 发 布 了 ， 其 功能 愈加 完善 ， 包 括 : 


口 移动 优先 的 响应 式 网 格 ; 
口 基于 Web 字体 的 图 标 ， 适 用 于 移动 及 高 密度 屏幕 ; 
O 不 再 支持 卫 7， 标 记 和 样式 更 加 简洁 高 效 。 
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1.4.23. LESS 的 威力 


简洁 的 CSS (LESS) 值得 重点 说 一 下 。 从 单纯 给 标记 添加 类 深入 到 自 定 义 Bootstrap 的 
LESS 文件 ， 大 幅 提高 了 我 们 的 工作 效率 和 控制 力 。 在 Bootstrap 默认 的 样式 表 基 础 之 上 ， 
开发 人 员 可 以 发 挥 自己 的 创造 力 ， 定 制 出 自己 的 核心 内 容 。 

换 句 话说 ，Bootstrap 确实 非常 强大 。 我 会 在 本 书 中 展示 其 令 人 兴奋 的 特性 、 效 率 和 最 佳 
实践 ， 告 诉 大 家 如 何 利用 它 做 出 漂亮 、 用 户 友好 的 界面 。 


1.2 TA Bootstrap 


FZ Bootstrap 的 途径 很 多 ， 但 通过 这 些 途 径 下 载 的 文件 并 不 完全 一 样 。 为 了 后 面 考虑 ， 
我 们 必须 保证 下 载 到 LESS 文件 , 因为 这 些 文件 可 以 为 我 们 提供 定制 和 创意 的 基础 。 在 这 
E, RARER, FIF GetBootstrap.com。 





Bootstrap is the most popular HTML, CSS, and JS 
framework for developing responsive, mobile first projects 
on the web. 


Download Bootstrap 





打开 网 站 ， 一 眼 就 能 看 到 大 大 的 “Download Bootstrap” 按 钮 。 翻 译本 书 时 ， 最 新 的 版 本 
为 v3.2.0。 点 击 这 个 按钮 ， 进 入 下 载 页 面 ; 





Download 


Bootstrap (currently v3.2.0) has a few easy ways to quickly get started, each 
one appealing to a different skill level and use case. Read through to see 
what suits your particular needs. 


Bootstrap Source code Sass 

Compiled and minified CSS. Source Less, JavaScript, and font strap ed from Less t 
JavaScript, and fonts. No docs or files, along with our docs. Sass for easy inclusion in Rails, 
original source files are included. Requires a Less compiler and Compass, or Sass-only projects. 


some setup. 





Download Bootstrap | Download Sass 





| Download source | 








Dnnnnnnnnnnnnnnnnnhttp:,//bloo.sina.comcacn uy 3283485963 


1.2 下载 Bootstrap 3 





可 以 看 到 中 间 那 个 “Download source” 按 钮 ， 点 击 下载 即 可 。 此 外 ， 也 可 以 访问 GitHub CNN 
上 的 项 目 链接 ( https://github.com/twbs/bootstrap ), ił "Download ZIP” 按 钮 。 为 方便 

创建 示例 ， 本 书 采用 Bootstrap v3.0.2 作为 示范 ， 这 个 版 本 可 以 在 GitHub 上 找到 并 下 载 : 
https://github.com/twbs/bootstrap/releases ; 








下 载 后 的 文件 
下 载 了 Bootstrap 的 源 文件 之 后 ， 应 该 能 看 到 类 似 下 图 所 示 的 文件 结构 : 





*' _config.yml 

DN _includes 

1] layouts 

L] assets 
bower.json 
browserstack.json 

M CNAME 

æ components.html 
composer.json 

i$; CONTRIBUTING.md 

lr css.html 

customize.html 

> (i dist 

..] examples 

zy fonts 

|| getting-started.html 

|! Gruntfile.js 

i index.html 

i javascript.html 

> inl js 

> i less 
FB LICENSE 

package.json 

男 README.md 


[Ci 











没 错 ， 文 件 不 少 ， 但 我 们 并 不 需要 那么 多 。 无 论 如 何 ， 这 里 包含 了 Bootstrap 所 能 提供 的 
一 切 。 

需要 说 明 的 是 ， 下 载 到 的 文件 中 的 实际 内 容 可 能 会 随 着 时 间 推 移 而 有 所 变化 ， 但 主要 内 
容 通常 不 会 变 。 比 如 , 在 less 文件 夹 中 , 可 以 找到 所 有 重要 的 LESS 文件 ,它们 是 本 书 所 
有 项 目的 基础 。 另 外 ，js 文件 夹 中 包含 的 是 Bootstrap 的 插件 ， 可 供 我 们 选择 使 用 。 
假如 你 只 需要 Bootstrap 默认 提供 的 预 编译 的 CSS 或 JavaScript 文件 (bootstrap.css 或 
bootstrap.minjs )， 也 可 以 在 dist 文件 夹 中 找到 它们 。 在 这 个 版 本 的 源 文 件 里 ， 还 有 一 个 
examples 文件 夹 ， 其 中 包含 示例 HTML 模板 。 我 们 第 一 个 项 目的 模板 文件 夹 就 会 基于 其 
中 一 个 示例 来 创建 。 
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4 第 1 章 初 识 Bootstrap 


1.3 准备 项 目 模板 文件 夹 


接 下 来 ， 我 们 为 第 一 个 项 目 创建 一 个 文件 夹 以 及 一 些 基本 的 文件 。 为 此 ， 我 们 还 要 用 到 
HTMLS 样板 文件 HTMLS Boilerplate (HSBP )， 然 后 把 Bootstrap 的 有 用 文件 复制 过 去 。 














1.3.1 下 载 H5BP 


在 浏览 器 中 打开 h5bp.com。 这 是 一 个 短 链接 ， 服 务 器 解析 后 会 重 定向 到 H5BP 的 主 文档 
页 面 。 可 以 在 这 个 页 面 直接 下 载 HS3BP， 也 可 以 单 击 SOURCE CODE 链接 , 在 GitHub 上 
下 载 。 


解压 下 载 到 的 ZIP 文件 ， 并 把 文件 夹 重 命名 为 Project Template 1 。 
在 这 个 文件 夹 中 ， 可 以 看 到 类 似 下 图 所 示 的 目录 结构 : 


























i 404.html 
El apple-touch-icon-precomposed.png 
= CHANGELOG.md 
= CONTRIBUTING.md 
* | crossdomain.xml 
Css 
J doc 
E favicon.ico 
ii humans.txt 
img 
= index.html 
is 
i| LICENSE.md 
= README.md 
i! robots.txt 











如 果 你 的 文件 系统 没有 显示 隐藏 的 文件 ， 可 能 看 不 到 .htaccess 文件 。 在 
QS 我 的 电脑 上 ,我 是 通过 自己 的 FTP 客户 端 打开 这 个 本 地 文件 夹 ， 从 而 看 
£i] htaccess 文件 的 。 
1.58.2 ”删除 不 必要 的 样板 文件 
删除 下 列 只 与 H5BP 相关 的 文件 夹 和 文件 : 





口 因为 稍 后 我 们 要 使 用 LESS 创建 自己 的 CSS 文件 ， 所 以 先 删除 css 文件 夹 。 
DCHANGELOGmd。 

口 CONTRIBUTINGmd。 

O doc 文 件 夹 及 其 中 内 容 。 
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1.4 加 入 Bootstrap 文件 5 





1.3.3 


1.3.4 


1.3.5 


1.4 


理解 样板 中 的 .htaccess 文件 


如 果 你 还 从 未 看 过 HSBP 中 的 .htaccess 文件 , 建议 先 看 看 H5BP 的 文档 ( http://h5bp.com )。 
当然 ， 这 个 文件 本 身 也 有 详细 注释 ， 可 以 用 编辑 器 打开 从 头 到 尾 看 一 遍 。 这 个 文件 中 的 
内 容 不 一 定 全 都 有 用 ， 这 取决 于 你 的 主机 设置 和 站 点 需求 。 不 过 这 个 文件 的 一 个 主要 用 
途 是 保证 站 点 性 能 最 优 。 和 希望 大 家 能 够 认真 对 待 它 ， 多 听 听 高 手 的 建议 ， 然 后 根据 需要 
配置 它 。 就 我 而 言 ， 因 为 我 的 主机 提供 商会 帮 我 处 理 这 些 事 ， 所 以 就 不 需要 这 个 .htaccess 
文件 了 。 






































更 新 必要 的 样板 文件 


样板 中 的 下 列 文件 提供 了 项 目的 标准 信息 ， 根 据 需 要 你 可 以 更 新 它们 、 直 接 使 用 它们 ， 
也 可 以 放 那 儿 不 管 ， 完 全 取决 于 你 。 


口 humans.txt: 这 个 文件 记载 贡献 者 ，H5BP Bootstrap 的 ， 还 有 其 他 贡献 者 。 

O LICENSE.md: 在 H5BP 许可 前 面 , 加 上 你 基于 该 许可 构建 的 网 站 的 许可 信息 , 在 HSBP 
许可 之 后 ， 加 上 Bootstrap 以 及 其 他 站 点 中 用 到 的 重要 的 库 的 许可 信息 。 

口 README.md: 更 新 这 个 文件 ， 加 上 自己 项 目的 说 明 信 息 。 


























更 新 站 点 桌面 和 触摸 设备 图 标 


不 要 忘 了 用 自己 项 目的 图 标 替 换 Boilerplate 默认 的 图 标 文件 ， 包 括 以 下 图 标 。 

D apple-touch-icon-precomposed.png: 为 确保 所 有 移动 设备 (包括 高 像素 密度 屏幕 设备 ) 
都 有 最 佳 效 果 ， 这 个 图 标 应 该 是 144px 见方 的 (样板 文件 中 的 是 152px 见方 的 )。 

口 favicon.ico: 32px 见方 的 图 标 文件 。 






























































之 前 版 本 的 样板 文件 曾经 包含 过 多 达 6 种 尺寸 的 触摸 设备 图 标 。 最 近 ， 这 

、 个 做 法 有 所 改变 。 因 为 大 图 标 可 用 于 所 有 相关 设备 ， 而 由 此 造成 的 性 能 损 
失 非 常 非常 小 。 为 了 减少 开发 人 员 制作 图 标的 工作 量 ， 现 在 就 只 留 下 一 个 
触摸 设备 图 标 了 。 如 果 你 对 相关 的 讨论 感 兴趣 ， 可 以 参考 这 个 链接 : 
https://github.com/h5bp/html5-boilerplate/issues/13677ref-pullrequest-18787780. 


加 入 Bootstrap 文件 


现在 ， 我 们 可 以 考虑 把 Bootstrap 的 文件 弄 到 Project Template 1 文件 夹 里 来 了 。 我 们 会 从 
Bootstrap 提供 的 一 大 堆 文 件 里 选 出 需要 的 部 分 。 为 了 加 快 进度 ， 强 烈 建议 大 家 分 别 在 两 
个 窗口 中 打开 Bootstrap 3 文件 夹 和 项 目的 模板 文件 来， 以 便于 比较 和 拖 放 。 
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6 第 1 章 ， 初 识 Bootstrap 

1.4.. 字体 
从 Bootstrap 的 主 文件 夹 中 , 把 fonts 文件 夹 复制 粘贴 到 Project Template 1 文件 夹 中 。 这 个 
文件 夹 里 包含 着 Bootstrap 附带 的 重要 的 Glyphicon 字体 。( 如 果 你 之 前 没 用 过 图 标 字 体 ， 
相信 你 会 喜欢 的 。) 
保险 起 见 , 建议 大 家 再 在 这 个 文件 夹 里 放 一 个 路 域 友好 的 .htaccess 文件 。 为 什么 ? 因为 随 
着 越 来 越 多 的 CDN (Content Delivery Network， 内 容 分 发 网 络 ) 为 你 的 网 站 缓存 静态 资 
源 ， 你 会 发 现 如 果 没 有 这 个 文件 ， 某 些 浏 览 器 会 拒绝 识别 你 的 Web 字体 。( 注意 ，H5BP 
的 .htaccess 文件 中 包含 了 解决 这 个 问题 的 代码 ,而 我 们 需要 做 的 , 就 是 保证 即使 站 点 根 目 
录 下 没有 放 H5BP 的 .htaccess 文件 ， 也 不 会 出 现 字 体 问 题 。) 
在 代码 编辑 中 创建 一 个 新 文件 ， 添 加 以 下 代码 : 
«FilesMatch "X.(ttf|otf|eot|woff)$"» 

«IfModule mod headers.c-» 
Header set Access-Control-Allow-Origin "*" 
«/IfModule» 
«/FilesMatch» 
\， “下 载 示例 代码 
Packt 所 有 图 书 的 示例 代码 都 可 以 登录 http://www.packtpub.com 下 载 。 如 
果 没 有 注册 过 ， 需 要 注册 一 个 账号 ， 下 载 地 址 会 发 到 你 的 注册 邮箱 里 。 

把 这 个 新 文件 直接 保存 到 fonts 文件 夹 中 , 并 将 其 命名 为 .htaccess。( 注意 ， 如 果 是 在 本 地 
计算 机 中 ， 你 的 操作 系统 可 能 不 会 显示 这 个 文件 。 假 如 你 不 知道 怎么 让 操作 系统 显示 隐 
藏 的 文件 ， 可 以 借助 FTP 客户 端 ， 设 置 客户 端的 首选 项 能 查看 隐藏 的 文件 ， 然 后 使 用 它 
的 浏览 絮 窗 口 来 查看 这 个 本 地 文件 夹 。) 
保存 好 之 后 ， 这 个 .htaccess 就 在 你 的 fonts 文件 夹 中 了 ， 它 能 够 确保 无 论 你 的 站 点 使 用 什 
4 CDN 服务 ， 所 有 浏览 器 都 可 以 使 用 你 的 Web 字体 。 

1.4.2 JavaScript 





好 ， 接 下 来 要 加 入 Bootstrap 的 JavaScript 文件 。HSBP 的 文件 夹 中 已 经 包含 了 一 个 放置 
JavaScript 文件 的 文件 夹 (AN js), 在 这 个 文件 夹 里 , 可 以 看 到 4 个 文件 一 一 有 2 个 位 于 
名 为 vendor 的 子 文件 夹 内 ， 如 下 面 的 截图 所 示 : 
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lag js 
B! main.js 
加 plugins.js 
Y Lj vendor 
il jquery-1.10.2.min.js 
Ææ modernizr-2.6.2.min.js 











Bootstrap 的 插件 都 基于 jQuery, M HSBP 已 经 为 我 们 准备 好 了 。 除 了 jQuery， 我 们 还 看 
到 了 Modernizr 脚本 。 人 简单 介绍 一 下 ，Modernizr 包含 的 是 HTMLS “WH” (shiv) 脚本 ， 
可 以 让 IE8 支持 HTMLS 的 分 区 (section ) 元 素 。 因 为 我 们 这 个 项 目 打算 支持 卫 8， 所 以 
也 用 得 着 它 。 除 此 之 外 ，Modernizr 还 可 以 让 我 们 更 方便 地 检测 特定 浏览 器 的 能 力 ， 比 如 
CSS3D 变换 ( 要 了 解 更 多 信息 ,请 参考 其 文档 ， 地 址 为 : http://modernizr.com/docs/ )。 下 
一 章 ， 我 们 会 用 到 Modernizr 的 特性 检测 功能 。 

接 下 来 我 们 实际 要 做 的 ， 就 是 把 Bootstrap 的 插件 脚本 都 弄 进 来 。 首 先 ， 我 们 把 它们 以 单 
个 文件 的 形式 复制 过 来 。 在 Project Template 1 文件 夹 的 子 文件 夹 js 中， 再 创建 一 个 名 为 
bootstrap 的 文件 来， 然后 把 Bootstrap 的 js 文件 夹 中 的 脚本 文件 都 复制 过 来 。 下 面 截 图 显 
示 了 Bootstrap 随 带 的 插件 ， 每 个 插件 一 个 文件 : 














affix.js 
alert.js 
button.js 
carousel.js 
collapse.js 
dropdown.js 
modal.js 
popover.js 
scrollspy.js 
tab.js 

tests 
tooltip.js 

i$! transition.js 


© [E] [& [8 [187 (18? [G8 [187 [87 [87 [877 [06 








把 这 些 插件 文件 集中 保存 到 新 建 的 js/bootstrap 文件 夹 ， 便 于 优化 网 站 性 能 ， 即 可 以 按 需 
选用 插件 、 排 除 其 他 文件 并 缩减 文件 大 小 。 
在 开发 期 间 ， 保 持 所 有 Bootstrap 的 插件 都 可 用 也 是 一 个 办 法 。 这 样 ， 如 果 你 想 添 加 个 折 
徐 、 提 示 或 者 传送 带 效 果 ， 都 可 以 信和 手 牛 来 。 我 们 在 此 选择 自己 的 做 法 。 

H5BP 采用 的 方法 是 把 所 有 插件 代码 都 复制 到 一 个 plugins.js 模板 文件 中 。 这 是 结束 开发 
之 后 的 最 佳 做 法 ， 因 为 这 样 可 以 减少 HTTP 请 求 ， 加 快 站 点 加 载 速度 。( 换 名 话说， 加 载 
一 个 80 KB 的 文件 ， 比 加 载 4 个 20 KB 的 文件 速度 更 快 。) 

我 们 在 这 个 项 目的 开发 过 程 中 ， 也 将 采用 相同 的 方法 。 我 们 要 做 的 只 是 把 必要 的 插件 代 
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码 复 制 到 plugins.js0 文件 中 。 所 以 下 面 我 们 就 要 找到 Bootstrap 中 包含 插件 代码 的 大 文件 。 


Q0 或 许 有 读者 喜欢 在 开发 期 间 分 别 在 标记 中 链接 用 到 的 单个 插件 ， 最 终 
再 把 它们 合并 成 一 个 。 如 果 你 愿意 ， 大 可 这 样 做 ， 忽 略 我 们 下 面 的 内 
容 即 可 。 


打开 Bootstrap 文件 夹 中 包含 分 发 文件 的 dist 文件 夹 。 在 这 个 文件 夹 中 的 js 文件 夹 里 , 包 
含 着 bootstrap.js 和 bootstrap.min.js， 它 们 就 是 包含 Bootstrap 所 有 插件 代码 的 大 文件 。 考 








上 处 到 这 一 章 的 练习 不 用 编辑 插件 代码 ， 所 以 我 们 可 以 直接 使 用 压缩 后 的 版 本 。 




















(xy dist 

> Wi css 
> i fonts 
* (an js 


i85 bootstrap.js 


L.— B boosstrapminjs — 








找到 图 中 选中 的 文件 后 ， 完 成 下 列 步 又 : 

(1) 在 编辑 器 中 打开 bootstrap.min.js; 

(2) 全 选 代 码 ， 包 括 开关 的 注释 ， 然 后 复制 ; 
(3) 打开 新 项 目 文件 夹 中 的 plugins.js; 














(4) 把 Bootstrap 的 插件 代码 精 贴 到 // Place any jQuery/helper plugins in here 


注释 下 面 。 结 果 看 起 来 如 下 所 示 〈 这 里 当然 省 略 了 很 多 后 续 代 码 )。 
// Place any jQuery/helper plugins in here. 


/** 

* bootstrap.js v3.0.0 by Gfat and @mdo 

* Copyright 2013 Twitter Inc. 

* http://www.apache.org/licenses/LICENSE-2.0 
E 





if (!jQuery) throw new Error ("Bootstrap requires jQuery") ;+function (a) {"use strict"; 


(5) 保存 并 退出 。 
这 样 就 把 Bootstrap 的 插件 都 准备 好 了 ! 

保留 Bootstrap 插件 及 其 他 插件 开头 的 注释 ， 就 保留 了 插件 的 来 源 信息 ， 
这 些 信 息 也 是 许可 的 基本 内 容 。 此 外 ， 我 们 因此 也 更 容易 搜索 到 相关 插 


件 。 比 如 ， 在 发 布 之 前 优化 代码 时 ， 就 需要 把 现在 的 压缩 版 本 替换 成 只 
包含 用 到 的 插件 的 压缩 版 本 。 保 留 注释 到 时 候 就 会 派 上 用 场 。 
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1.5 大 盘点 9 


14.3 ”暂时 不 考虑 CSS 文件 LN 


在 后 面 的 项 目 中 ， 我 们 会 使 用 LESS 创建 自 定义 的 Bootstrp CSS 文件 。 下 一 章 开始 就 会 
这 么 做 ， 现 在 先 不 用 考虑 CSS. 











1.4.4 复制 LESS 文件 


下 面 我 们 把 Bootstrap 中 重要 的 LESS 文件 复制 过 来 :把 bootstrap/less 文件 夹 复制 到 Project 
Template 1 文件 夹 中 。 


15 大 盘点 


现在 ，Project Template 1 文件 夹 应 该 如 下 图 所 示 : 





m 404.html 

8 apple-touch-icon-precomposed.png 
*' crossdomain.xml 
B. favicon.ico 

(xy fonts 

i humans.txt 

i img 

i index.html 

a js 

(x less 

ii, LICENSE.md 

= README.md 

lI robots.txt 








而 fonts 文件 夹 ， 包 括 新 创建 的 .htaccess 文件 在 内 ， 应 该 如 下 图 所 示 : 





LJ fonts 
.htaccess 
glyphicons-halflings-regular.eot 
™, glyphicons-halflings-regular.svg 
glyphicons-halflings-regular.ttf 





7 glyphicons-halflings-regular.woff 





我 一 直 在 用 自己 的 FTP 客户 端 来 查看 文件 , 并 将 其 设置 为 显示 隐藏 的 文 
~ 件 。 如 果 你 没有 像 我 这 样 ， 有 可 能 看 不 到 隐藏 的 .htaccess 文件 。 

















接 下 来 ，img 文件 夹 应 该 是 空 的 ，H5BP 原 带 的 就 是 如 此 。 
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1.6 


下 面 的 js 文件 夹 中 应 该 包含 以 下 子 文件 夹 和 文件 : 





js 
Y |] bootstrap 
affix.js 
alert.js 
button.js 
carousel.js 
collapse.js 
dropdown.js 
modal.js 
popover.js 
scrollspy.js 
tab.js 
> (aj tests 
i tooltip.js 
i; transition.js 
i| main.js 
i! plugins.js 
Y |. vendor 
i& jquery-1.10.2.min.js 
i! modernizr-2.6.2.min.js 


CHI 国 , | 国 , | 国 , | 国 , | 国 


CHICHI 


[E 








由 于 采用 了 模块 化 的 开发 方式 ，Bootstrap 的 less 文件 夹 中 包含 很 多 文件 。 下 面 几 节 在 讲 
到 编译 它们 的 时 候 ， 我 们 会 详细 介绍 。 


首先 ， 我 们 来 构造 出 HTML 文件 。 




















构造 HTML 模板 


在 新 项 目 文 件 夹 中 ， 用 编辑 器 打开 index.html。 这 个 示例 标记 文件 来 自 H5BP, 体现 了 一 
些 最 佳 实践 和 建议 方案 。 我 们 就 以 这 个 文件 为 基础 ， 把 它 整 合 到 Bootstrap 的 工作 流 中 。 

下 面 先 了 解 一 下 这 个 文件 。 

浏览 一 下 整个 文件 ， 你 会 发 现 几 个 有 意思 的 地 方 。 这 些 地 方 在 HSBP 的 文档 中 都 有 详细 
说 明 , 访问 这 个 链接 http://h5bp.com 很 容易 找到 。 不 过 我 们 接 下 来 也 会 简单 介绍 一 些 , 我 
们 按照 次 序 来 。 

O HTML5 文档 类 型 声明 : 

«IDOCTYPE html» 

口 针 对 IE WRR, FRAMARA AEAT AIAX HEN V st H5) 4 Ae FA : 


<!--[if lt IE 7]»«html class-"no-js lt-ie9 lt-ie8 lt-ie7"»«![endif]--» 
<!--[if IE 7]»«html class-"no-js lt-ie9 lt-ie8"»«![endif]--» 
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1.6 构造 HTML 模板 11 








<!--[if IE 8]»«html class-"no-js lt-ie9"»«![endif]--» 
<!--[if gt IE 8]»«!--»«html class-"no-js"»«!--«![endif]--» 


D ntml 标签 也 包含 一 个 no-js X. DURUM dH JavaScript RH, Modernize Ws CA 








章 前 面 介绍 过 ) 会 把 这 个 类 删除 ,并 将 其 替换 成 js 类 。 如 果 这 个 类 没有 被 删除 , 则 表 
口 接 下 来 是 几 个 meta 标签 。 
用 于 指定 字符 集 的 : 
<meta charset="utf-8"> 


m 告诉 下 使 用 最 新 版 的 演 染 引擎 ， 或 者 如 果 安 装 了 的 话 ， 使 用 谷歌 的 Chrome Frame: 


«meta http-equiv="X-UA-Compatible" 
content="IE=edge,chrome=1"> 


m 预 留 给 描述 站 点 用 的 : 


<meta name="description" content=""> 


m 针对 移动 浏览 锅 的 视 口 标签 : 


«meta name-"viewport" content-"width-device-width"» 


Q 在 该 放 站 点 图 标 和 触摸 屏 图 标的 地 方 ， 是 一 行 注 释 ， 告 诉 我 们 可 以 直接 使 用 站 点 根 目 
录 下 的 图 标 文件 ， 放 在 站 点 根 目录 下 可 以 自动 被 用 户 浏览 絮 及 设备 发 现 。 
口 接 下 来 是 两 个 样式 表 的 链接 ， 一 个 指向 normalize.css， 男 一 个 指向 main.css: 


«link rel-"stylesheet" href-"css/normalize.css"» 
«link rel="stylesheet" href-"css/main.css"-» 


口 再 下 面 就 是 加 载 Modernizr 脚本 的 script 标签 。 这 个 脚本 会 为 IE8 提供 HTMLS “H 
片 脚本 ”， 以 便 它 能 识别 HTMLS 的 分 区 元 素 : 


«script src-"js/vendor/modernizr-2.6.2.min.js"»«/script» 


口 接 下 来 是 下 条 件 注释 ,包含 推荐 用 户 把 旧版 TE 升级 到 新 版 本 的 消息 : 


<!--[if lt IE 7]> 
<p class="chromeframe">You are using an 
<strong>outdated</strong> browser. 
<![endif]--> 


口 紧 接 着 是 一 段 文本 。 
口 随后 是 托管 在 谷歌 服务 器 上 的 jQuery 链接， 以 及 一 个 本 地 jQuery 的 后 备 链接 : 


«script src-"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/ 
jaquery.min.js"»«/script» 

«script»window.jQuery || document.write('«script 
src-"js/vendor/jquery-1.10.2.min.js"» 
<\/script>')</script> 
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口 下 面 就 是 pluginsjs 和 main.js 的 链接 ， 分 别 用 于 保存 JavaScript 插件 代码 和 我 们 编写 的 
代码 : 


<script src="js/plugins.js"></script> 
<script src="js/main.js"></script> 


O 谷歌 的 Analytics 脚本 : 


<script> 
var _gaq=[['_setAccount', 'UA-XXXXX- 
X'],[' trackPageview']]; 


(function(d,t)(var g-d.createElement(t), 
s-d.getElementsByTagName(t)[0]; 
g.src-('https:'--location.protocol?'//ssl':'//www')-*' 
.google-analytics.com/ga.js'; 
s.parentNode.insertBefore(g,s)) (document, 'script')); 
«/script» 


如 果 你 想 更 详细 地 了 解 有 关上 面 这 些 内 容 的 信息 ， 还 是 去 看 看 H5BP 的 文档 吧 ， 干 脆 直 
接 把 它 的 HTML 文档 链接 给 你 : https//github.com/h5bp/html5-boilerplate/blob/v4.3.0/ 
doc/htmlmd。 这 个 文档 中 的 解释 非常 详细 。 

对 本 章 的 任务 而 言 ， 我 们 需要 对 这 个 模板 中 的 元 素 进 行 如 下 操作 : 

(1) 设 定 我 们 站 点 的 标题 ， 针 对 旧版 本 浏览 器 用 户 更 新 现 有 的 下 条件 注释 ; 

(2) 基于 LESS 文件 编译 Bootstrap 的 CSS， 添 加 基本 的 页 面 内 容 ; 

(3) 整合 Bootstrap 的 JavaScript 插件 ， 确 保 响应 式 的 导航 条 (navbar) 正常 响应 。 


做 完 这 几 件 事 之 后 ， 我 们 就 可 以 真正 开始 设计 自己 的 网 站 了 。 









































1.7 设 定 站 点 标题 


先 把 index.html 文 件 中 <title> 的 内 容 加 上 。 你 可 以 随便 给 自己 的 作品 起 名 字 ， 比 如 
Bootstrappin' Portfolio。 为 准确 起 见 ， 这 里 使 用 HTML 实 体 gs#39 来 表示 单 引号 ， 结 果 如 下 
所 示 : 


<title>Bootstrappin&#39; Portfolio</title> 





1.7.1 ”调整 过 时 的 浏览 器 消息 
模板 中 的 消息 针对 老 浏览 器 用 户 。 大 概 在 第 20 行 左右 ， 消 息 内 容 如 下 : 


You are using an outdated browser. Please upgrade your browser 
or activate Google Chrome Frame to improve your experience. 


这 段 消 息 里 面包 含 一 个 指向 http;//browsehappy.com 的 链接 ， 该 网 站 是 一 个 推荐 浏览 器 升 
级 的 站 点 ， 也 包括 升级 到 让 TE 能 拥有 现代 浏览 器 能 力 的 插件 

















Google Chrome Frame。 
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1.7.2 





(不 过 ， 随 着 谷歌 从 2014 1 月 起 停止 维护 ，Google Chrome Frame 的 链接 也 许 已 经 不 存 
在 了 。) 


在 本 书写 作 的 时 候 ， 这 条 消息 包含 在 一 个 只 针对 IE7 之 前 浏览 器 (BD IE6、IE5， 等 等 ) 
的 条 件 注释 中 。 这 样 一 来 ， 除 非 看 源 代码 ， 否 则 不 太 可 能 有 人 看 到 这 条 消息 。 
世界 一 直 在 前 进 。 很 多 组 织 都 在 升级 浏览 器 ， 而 很 多 设计 者 也 不 再 支持 IE7。 不 过 , 一 般 
来 说 ， 大 家 的 目标 还 是 要 确保 IE7 用 户 能 够 看 到 站 点 内 容 ， 只 是 不 保证 他 们 的 体验 。 


这 样 做 是 比较 实际 的 。 因 为 要 完全 支持 正 7， 必 须 增 加 很 多 额外 的 工作 量 ， 包 括 CSS 和 
JavaScript 编码 工作 。 代 码 增加 ， 带 宽 占 用 也 增加 ， 成 本 也 更 高 。 


所 以 ，Bootstrap 3 也 不 再 支持 IE7。 但 在 开发 结束 后 ， 我 们 还 是 应 该 测试 一 下 ， 保 证 IE7 
用 户 能 够 访问 站 点 。 当 然 ， 肯 定 不 能 保证 完美 的 体验 了 。 

为 此 ， 我 们 应 该 让 IE7 用 户 也 看 到 这 条 消息 。 这 就 需要 在 原 有 条 件 注释 中 添加 一 个 表示 
等 于 的 e (equal), Wn FETAR: 

<!--[if lte IE 7]» 

也 就 是 把 原来 的 1c 蔡 换 成 tes 

还 有 几 点 要 注意 。 
























































对 于 IE7 及 更 早 的 下 版 本 ,可 以 考虑 提供 基本 的 样式 表 ， 保 证 用 户 能 6 


使 用 你 的 网 站 。 
= 如 果 你 的 用 户 里 有 很 大 一 部 分 都 使 用 IE7， 而 且 这 些 人 也 不 可 能 升级 到 


新 版 本 ， 可 以 考虑 支持 IE7 的 Bootstrap 2.2.3。 


要 是 你 想 知 道 这 些 消 息 显示 在 浏览 器 里 是 什么 样子 ,或 者 想 给 它们 添加 一 点 样式 , 可 以 暂 
时 把 开始 (<!--[if lte IE 712 ) 和 结束 ( <! [endif]--> ) 的 条 件 注释 删 掉 或 注释 掉 。 


设置 主 结构 元 素 
下 面 开 始 准备 页 面 内 容 。 目 前 ， 还 只 有 一 个 段落 。 我 们 可 以 稍微 添加 一 点 东西 ， 比 如 下 
列 内 容 : 
口 包 含 Logo 和 导航 的 页 头 区 ; 
口 包含 页 面 内 容 的 内 容 区 ; 
口 包含 版 权 和 社交 媒体 链接 的 页 脚 区 。 
添加 这 些 内 容 , 我 们 都 会 基于 最 新 的 HTML 最 佳 实践 来 做 , 而 且 会 考虑 ARIA( Accessible 
Rich Internet Applications , 可 访问 富 因特网 应 用 OR role 属性 ( 即 banner navigation, 
main 和 contentinfo 这 几 个 角色 ), 可 能 你 也 知道 ,HTML5 后 来 又 增加 了 <main role- 
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re 


$13 WA Bootstrap 





1.8 


"main"></main> 元 素 , 目的 是 专门 为 页 面 或 分 区 中 的 主 内 容 提供 一 个 专用 的 元 素 。 要 





了 解 更 多 相关 信息 ， 请 参考 这 个 链接 : http://www.sitepoint.com/html5-main-element/。 
找到 模板 文件 中 下 面 这 个 注释 和 段落 : 


<!-- Add your site or application content here --» 
«p»Hello world! This is HTML5 Boilerplate.«/p» 


将 它们 替换 成 下 面 这 样 : 
«header role-"banner"» 
«nav role-"navigation"» 


«/nav» 
«/header» 





«main role-"main"» 

«hi1»Main Heading</h1> 

«p»Content specific to this page goes here.«/p» 
«/main» 


«footer role-"contentinfo"» 
«p»«small»Copyright &copy; Company Name«/small»«/p» 
«/footer» 


这 就 是 我 们 页 面 的 基本 结构 和 内 容 了 。 接 下 来 更 进一步 。 








导航 条 


还 记得 吧 ， 咱 们 并 没有 借用 Bootstrap 预 编译 的 CSS 文件 ， 而 且 也 没有 自己 写 LESS 并 编 
译 自己 的 CSS; 稍 后 我 们 会 。 在 此 之 前 ， 我 们 得 先 把 Bootstrap 特有 的 元 素 设置 好 ， 那 就 





























作为 起 点 ， 我 们 可 以 就 使 用 Bootstrap 基本 的 导航 条 (后面 再 添加 更 多 细节 )。 为 此 ,我 


从 Bootstrap 文档 中 拿 来 它 的 导航 条 代码 ， 然 后 做 了 如 下 调整 : 





随 页 面 滚动 而 滚动 ; 
口 把 项 目 名 称 链接 到 index.html; 
O 把 原来 的 父 aiv 标签 改 成 了 语义 化 的 HIMLS nav 标签 。 


经 过 这 一 番 调 整 后 ， 得 到 如 下 header 元 素 : 


«header role-"banner"» 
«nav role-"navigation" class-"navbar navbar-static-top navbar-default"'» 
«div class-"container"» 
«div class-"navbar-header"» 
«a class-"navbar-brand" href-"index.html"»Project name</a> 
«/div» 
«ul class="nav navbar-nav"» 
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口 添 加 了 navbar-static-top 类 ， 因 为 我 们 和 希望 导航 条 能 够 定位 到 窗口 顶部 ， 但 能 够 
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«li class-"active"»«a href="index.html">Home</a></1i> 
<li><a href="#">Link</a></1i> 





<li><a href="#">Link</a></li> 
</ul> 
</div> 
</nav> 
«/header» 


保存 结果 ， 在 浏览 器 中 打开 并 刷新 index.html。 如 下 图 所 示 ， 并 没有 太 多 特别 的 : 








Project name 


。 Home 
e Link 
e Link 














内 容 有 了 。 ME, 我 们 特别 需要 自己 的 样式 表 。 先 来 编译 并 链接 Bootstrap 默认 的 样式 表 。 











1.9 ”编译 和 链接 默认 的 Bootstrap CSS 


我 们 可 以 直接 把 Bootstrap 默认 的 bootstrap.css 文件 拿 来 用 ， 但 不 如 借 此 机 会 学 习 一 下 编 
译 LESS 文件 。 这 样 可 以 为 我 们 将 来 的 设计 打下 基础 。 




















1.9.1 编译 Bootstrap CSS 


可 能 大 家 有 熟悉 LESS， 也 有 不 熟悉 LESS 的 。 没 关系 ,不管 你 是 否 熟 悉 ， 我 都 会 教 你 怎 
么 做 。 不 过 ， 我 还 是 建议 你 看 看 LESS 的 文档 : http://lesscss.org， 再 找 几 个 LESS 的 教程 
看 完 。 稍 后 你 就 会 知道 ，LESS 非常 强大 ， 也 很 好 玩 ， 使 用 它 能 够 大 大 提高 效率 。 


现在 ， 我 们 只 编译 ， 而 不 写 LESS 文件 。 
找到 less/bootstrap.less， 在 编辑 右 中 打开 它 。 你 会 发 现 这 个 文件 导入 了 less 文件 夹 中 所 有 
的 其 他 文件 。 编译 后 ,这 个 文件 会 生成 完整 的 bootstrap.css 样式 表 。 而 这 就 是 我 们 第 一 步 
要 做 的 。 
如 果 你 以 前 没有 编译 过 LESS 文件 ， 需 要 下 载 和 安装 它 的 编译 髓 。 
O Windows 用 户 ， 下 载 安装 这 个 编译 骨 : 

m WinLess ( 免费 桌面 应 用 )， 地 址 为 http:/winless.org "。 






























































Qa 为 方便 起 见 ， 读 者 也 可 以 在 这 个 链接 下 载 : http://pan.baidu.com/s/1c03tWQW。 一 一 译 者 注 
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^x > 


* 1# 初 识 Bootstrap 





口 Mac 用 户 ， 可 以 选择 下 载 : 


m Crunch 应 用 (免费)， 地 址 为 http://crunchapp.net/。 
m CodeKit ( 收费 )， 地 址 为 http://incident57.com/codekit/。 


下 载 了 选择 的 LESS 编译 器 之 后 ， 安 装 ， 打 开 。 然 后 就 可 以 按照 下 面 的 步 又 来 做 了 。 
(1) Æ fonts, img, js 和 less 文件 夹 平 级 的 主 文件 夹 里 创建 一 个 css 文件 夹 。 





























B. favicon.ico 
LJ fonts 
ii, humans.txt 
| img 
= index.html 














(2) 使 用 下 列 方法 中 的 一 种 把 主 文 件 夹 (ess, fonts, img, js 和 less 文件 夹 的 父 文件 夹 ) 
添加 到 编译 器: 
mu 把 文件 夹 拖 到 编译 器 窗口 中 ; 
m 在 编译 器 窗口 中 找到 Add folder 按 钮 ， 点 击 后 选择 主 文件 夹 。 

(3) 然后 在 编译 器 窗口 中 可 以 看 到 加 载 的 LESS 文件 ， 找 到 less/bootstrap.less 文件 。 

(4) 右键 单 击 less/bootstrap.less 文件 ， 选 择 Select output file， 找 到 刚刚 创建 的 css 文件 夹 ， 
此 时 输出 文件 名 应 该 自动 会 变 成 bootstrap.css， 单 击 “ 保 存 ”。 

(5) 选择 输出 路 径 和 文件 名 ， 单 击 Compile。 

(6) css 文件 夹 中 会 出 现 编译 生成 的 bootstrap.css 文件 。 














































































































如 果 编 译 出 了 问题 ， 可 以 查看 编译 器 的 上 日志， 以 及 输出 路 径 是 否 正确 。 
. 此 外 ， 如 果 编 译 时 出 错 ， 也 可 能 是 编译 器 的 更 新 没有 跟 上 LESS 开发 的 
步伐 。 最近， 我 在 使 用 另外 一 个 免费 编译 器 时 就 磁 到 了 这 样 的 问题 。 如 
果 你 发 现 编译 器 不 能 编译 默认 的 Bootstrap LESS 文件 ， 很 可 能 需要 下 载 

编译 器 的 最 新 版 本 ， 或 者 编译 器 本 身 需要 更 新 了 。 














(7) 编译 成 功 后 ， 唯 一 要 注意 的 是 这 个 文件 名 是 否 与 index.html 中 链接 的 文件 名 相同 。 

(8) 在 index.html 中 , 删除 指 回 css/normalize.css 的 样式 表 链 接 , 因为 这 个 样式 表 已 经 包含 
在 Bootstrap 中 了 ( normalize.less 在 bootstrap.less 中 是 第 一 个 导入 的 )。 

(9) 接 下 来 链接 的 样式 表 指 向 css/main.css， 因 为 后 面 我 们 会 自 定义 Bootstrap 以 生成 自己 
的 样式 表 ， 所 以 这 个 链接 先 不 用 动 ， 将 来 我 们 再 用 它 来 链接 自 定 义 的 样式 表 。 
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(10) 在 这 里 ， 我 们 先 来 个 偷梁换柱 ， 复 制 一 份 bootstrap.css， 重 命名 为 main.css ( 将 来 再 | 
用 自 定义 的 样式 表 重 写 这 个 文件 )， 结 果 如 下 图 所 示 : 








i css 
i bootstrap.css 
main.css 


(11) 刷新 浏览 器 ， 应 该 看 到 Bootstrap 3 默认 的 导航 样式 ， 如 下 图 所 示 ， 从 排版 和 布局 上 
有 所 增强 ， 这 说 明 CSS 已 经 生效 ， 祝 贺 你 ! 





Project name Home Link Link 


Main Heading 


Content specific to this page goes here. 


Copyright @ Company Name 























这 样 我 们 就 配置 好 了 使 用 Bootstrap 的 默认 样式 了 。 接 下 来 ， 我 们 就 继续 把 导航 条 变 成 响 
应 式 的 。 在 此 期 间 ， 我 们 还 会 顺便 测试 Bootstrap 的 JavaScript 插件 能 够 正常 工作 。 








1.9.2 ”完成 响应 式 导 航 条 


为 了 在 Bootstrap 响应 式 导航 条 基础 上 完成 我 们 的 导航 条 ， 还 得 再 增加 两 个 新 元 素 ， 以 及 
相应 的 类 和 data 属性 。 相 关 的 用 法 可 以 参考 Bootstrap 的 Components X4, E Navbar 
选项 卡 下 : http://getbootstrap.com/components/#navbar。 

先 按 照 下 列 步骤 添加 额外 的 标记 。 


(1) 搜索 到 <div class="navpbar-header">, 在 这 个 元 素 中 ,添加 一 个 navbar-toggle 
按钮 ， 用 于 展开 和 收 起 响应 式 导 航 条 。 下 面 就 是 这 个 按钮 的 全 部 标记 ( 我 把 它 放 到 
navbar-header 里 面 ): 























«div class="navbar-header"> 
«button type-"button" class-"navbar-toggle" data- 
toggle-"collapse" data-target-".navbar-collapse"-» 
«span class-"icon-bar"»«/span» 
«span class-"icon-bar"»«/span» 
«span class-"icon-bar"»«/span» 
«/button» 
«a class-"navbar-brand" href-"index.html"»Project 
name</a> 
</div> 
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A 1# 和 初 识 Bootstrap 





下 面 简单 解释 一 下 以 上 代码 : 

m 按钮 中 的 navbar-toggle 类 用 于 应 用 CSS 样式 ; 

u 后 面 的 数据 属性 data-toggle 和 data-target 是 Bootstrap 的 JavaScript 插 件 要 用 
的 ， 分 别 表示 预期 行为 和 预期 目标 CHI collapse 和 类 名 为 navbar-collapse 的 
元 素 ， 这 个 元 素 后 面 会 添加 ); 

u 类 名 为 icon-bar 的 span 元 素 是 CSS 用 来 创建 按钮 中 的 三 道 杠 按钮 用 的 。 

(2) 接 下 来 把 导航 项 包装 在 一 个 收 起 的 aiv 中 ， 即 用 带 有 适当 Bootstrap 类 的 aiv 把 ul 


class="nav navbar-nav"> 包 装 起 来 : 
































«div class-"navbar-collapse collapse"> 
«ul class="nav navbar-nav"» 
«li class-"active"»«a href-"index.html"»Home«/a»«/li» 
<li><a href="#">Link</a></1i> 
<li><a href="#">Link</a></1i> 
«/ul» 
«/div»«!--/.nav-collapse --» 


在 前 面 两 步 中 ， 我 们 把 代码 分 隔 成 两 部 分 ， 而 且 都 位 于 <div class="container"> 中 。 
为 确保 你 的 代码 写 得 没 错 ， 可 参考 本 章 完整 的 示例 代码 。 


这 里 的 标签 名 、 类 名 和 数据 属性 在 将 来 的 Bootstrap 版 本 中 可 能 会 变 。 如 


果 你 发 现 自己 的 代码 不 行 ,一 定 要 看 看 相应 Bootstrap 版 本 的 文档 。 保险 
起 见 ， 可 以 使 用 本 书 提供 的 示例 代码 来 试验 。 


好 了 ,保存 文件 ， 刷 新 浏览 器 。 在 任何 一 个 现代 浏览 器 (IE9 或 Firefox, Chrome, Safari 
等 的 最 新 版 本 ) 中 ， 拖 动 窗口 缩小 到 小 于 980 像素 。 


如 果 一 切 顺 利 ， 应 该 看 到 收 起 来 的 导航 条 ， 如 下 面 的 屏幕 截图 所 示 ， 但 可 以 看 到 站 点 名 
或 Logo 以 及 切换 按钮 。 











Project name 


Main Heading 


(Content specific to this page goes here. 


Copyright € Company Name 





























这 是 个 好 兆头 ! 表单 击 切换 按钮 ， 应 该 看 到 滑动 打开 的 链接 ， 如 下 图 所 示 : 
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Project name 


Home 
Link 


Link 


Main Heading 


Content specific to this page goes here. 


Copyright @ Company Name 











成 功 啦 , 干 得 不 错 ! 


1.9.3 ”排除 故障 


如 果 一 切 顺 利 ， 那 说 明 你 已 经 成 功 地 把 LESS 编译 成 了 CSS ， 而 且 也 成 功 地 包含 了 

Bootstrap 的 JavaScript 插件 。 

如 果 不 顺利 ， 可 以 再 检查 一 遍 以 下 事项 。 

O 你 的 标记 结构 藤 套 关系 是 否 正确 ”有 没有 未 闭合 、 不 完整 或 错 配 的 标签 、 类 ， 等 等 ? 

O 是 否 成 功 地 把 LESS 编译 成 了 CSS? 编译 得 到 的 CSS 是 否 放 到 了 正确 的 文件 夹 里 ， 命 

名 是 否 正确 ? 

口 位 于 index.html 中 的 CSS 链接 是 否 正 确 ? 

口 是 否 包 含 了 Bootstrap 的 JavaScript 插件 ? 

另外 ， 下 面 这 些 事 项 也 可 能 有 用 。 

(1) 把 前 面 的 步 又 从 头 到 尾 再 过 一 遍 ， 同 时 注意 上 述 各 项 ; 

(2) 验证 HTML 保证 格式 正确 ; 

(3) 比较 本 书 示例 代码 和 你 自己 的 代码 ; 

(4) 参考 Bootstrap 文档 ， 看 是 否 有 标签 结构 和 属性 的 变化 ; 

(5) 把 你 的 代码 放 到 http://jsfiddle.net/z http://www.codepen.com/ E ,到 http:;//stackoverflow. 
com/ 上 寻找 高 手 帮 助 。 

把 那么 多 文件 揉 合 到 一 起 ， 让 它们 协作 运行 ， 出 点 问题 很 正常 。 而 学 会 找到 问题 和 解决 

问题 同样 是 我 们 的 生存 之 道 ! 

好 吧 ， 假 设 到 现在 为 止 所 有 问题 都 解决 了 ， 接 下 来 就 让 我 们 再 探讨 一 个 不 那么 显而易见 

的 问题 。 我 们 想 让 自己 的 作品 支持 IE8。 为 此 ， 需 要 考虑 一 下 老 版 本 的 浏览 器 。 





Id 
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1.9.4 支持 IE8 
要 支持 TES ,需要 一 段 JavaScript 代码 让 浏览 器 能 够 响应 媒体 查询 。 这 段 代 码 就 是 Scott Jehl 
的 respondjs“ 腻 子 脚本 ”。 


Bootstrap 自身 的 文档 推荐 这 样 做 以 兼容 IE8。 相 关 的 信息 可 以 参考 这 里 :http://getbootstrap. 
com/getting-started/Zbrowsers o 


为 了 针对 IE8 应 用 这 段 脚本 ， 需 要 针对 IES 的 条 件 注释 : 


<!--[if lt IE 9]» 




















21 Lendi£]-cs 

另外 ， 根 据 Andy Clarke 的 建议 ， 为 了 不 让 并 不 需要 这 个 脚本 的 Windows 移动 设备 加 载 
该 脚本 ， 还 应 该 排除 IE 移动 版 浏览 器 ， 具 体 参见 他 的 在 线 代码 库 320andup， 地 址 是 : 
https://github.com/malarkey/320andup/。 

Clarke 建议 的 条 件 注释 如 下 : 


<!--[if (lt IE 9) & (!IEMobile)]» 























Z! [endif] -> 
有 了 条 件 注释 ， 下 面 就 是 在 站 点 模板 文件 中 添加 腻子 脚本 了 ， 步 又 如 下 。 


(1) 打开 https://github.com/scottjehl/Respond ( 也 可 以 在 Github 上 搜索 respond.js 找到 下 载 
地 址 )。 如 果 你 有 时 间 ， 可 以 看 看 这 个 页 面 中 的 文档 ， 了 解 一 些 这 个 脚本 的 工作 原理 。 




















scottjehl / Respond G Watch ~ %0  *S 
A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) 
162 7 5 13 


p master ~ Respond /上 
Bump current to 1.3.0 
f scottjehi j BE 








(2) 找到 文件 ， 下 载 ZIP: 
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cp Download ZIP 


S9 





(3) 解压 缩 ， 找 到 名 为 respond.min.js 的 压缩 版 。 
(4) 把 它 复制 到 项 目 文件 夹 中 的 js/vendor 目录 下 ， 与 jQuery 和 Modernizr 放 到 一 块 。 





iul js 
> |. bootstrap 
i! main.js 
男 plugins.js 
Y |. vendor 
i! jquery-1.10.2.min.js 
i! modernizr-2.6.2.min.js 





respond.min.js 





(5) 然后 ， 把 下 面 几 行 加 载 respond.js 文件 的 代码 添加 到 index.html 中 ， 包 括 针 对 IE 的 条 
件 注释 ， 就 在 加 载 Modernizr 的 代码 下 面 : 


«!-- Modernizr --» 
«script src-"js/vendor/modernizr-2.6.2.min.js"»«/script» 
«!-- Respond.js for IE 8 or less only --» 
<!--[if (lt IE 9) & (!IEMobile)]» 
«script src-"js/vendor/respond.min.js"»«/script» 
<! [endif]--» 


(6) 好 了 ， 这 样 IES 就 可 以 支持 媒体 查询 响应 视 口 大 小 变化 了 。 











如 果 你 想 测 试 添 加 腻子 脚本 的 结果 ， 但 又 没有 IE8 浏览 器 ， 可 以 使 用 一 
y 4 个 在 线 服务 ， 叫 Browsershots, ， 地 址 是 : http://browsershots.org， 这 是 免 
~ 费 的 。 还 有 一 个 收费 的 ， 叫 BrowserStack ， 地 址 是 : http://www. 


browserstack.com ( 试用 免费 )。 
这 样 ， 我 们 站 点 的 模板 就 做 完了 。 继 续 之 前 ， 我 们 先 来 小 结 一 下 。 


1.10 小结 








如 果 大 家 一 直 跟 着 前 面 的 教程 在 做 , 那 到 现在 已 经 为 继续 实现 更 高 级 的 设计 打 好 了 基础 。 
我 们 来 清点 一 下 吧 ， 我 们 已 经 有 了 了: 
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a 一 个 完善 的 HTML5 标记 结构 ， 内 置 了 很 多 最 佳 实践 ; 
O 一 个 标准 的 Bootstrap 样式 表 文 件 ， 已 链接 ; 

口 能够 正常 工作 的 JavaScript 插件 ; 

a 一 个 响应 式 的 导航 条 ; 

口 ( 可 能 更 重要 的 ) 随时 可 以 派 上 用 场 的 LESS ikto 














这 时 候 ， 或 许 把 所 有 文件 都 备份 一 下 比较 好 ， 因 为 后 面 的 项 目 都 可 以 把 
一 它 作 为 基础 。 


下 一 章 我 们 就 来 弄 点 好 玩 的 ， 进 一 步 挖 气 Bootstrap 的 潜力 ， 创 建 一 个 漂亮 的 个 人 作品 展 
示 站 点 。 
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2.1 


作品 展示 站 所 


假设 我 们 已 经 想 好 了 要 给 自己 的 作品 弄 一 个 在 线 站 点 。 一 如 既往 ， 时 间 紧 迫 。 我 们 需要 
快 一 点 ,但 作品 展示 效果 又 必须 专业 。 当 然 ， 站 点 还 得 是 响应 式 的 ， 能 够 在 各 种 设备 上 
正常 浏览 ， 因 为 这 是 我 们 向 目标 客户 推销 时 的 卖点 。 这 个 项 目 可 以 利用 Bootstrap 的 很 多 
内 置 特性 ， 同 时 也 将 根据 需要 对 Bootstrap 进行 一 些 定制 。 





























设计 目标 

我 们 已 经 草拟 了 两 个 主页 的 效果 图 。 虽 然 对 大 屏幕 中 的 展示 效果 已 经 胸有成竹 ， 但 我 们 
还 应 该 从 小 屏幕 设备 开始 ， 强 迫 自己 聚焦 在 关键 的 要 素 上 面 。 

这 个 作品 展示 站 点 应 该 具有 下 列 功能 : 

口 带 Logo 的 可 折 和 受 的 响应 式 导 航 条 ; 

口 重点 展示 4 张 作 品 的 图 片 传 送 带 ; 

口 单 栏 布局 中 包含 三 块 内 容 ， 每 块 内 容 中 都 包含 标题 、 短 段落 和 吸引 人 点 击 阅读 的 大 
按钮 ; 

口 页 脚 包含 社交 媒体 链接 。 

下 面 的 屏幕 截图 展示 了 设计 方案 : 
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Welcome! 













Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Our Team 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices est. 


Bootstrappin" 
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总 的 来 看 ， 这 将 是 对 我 们 工作 成 果 的 一 个 完美 的 展示 。 图 片 传送 带 比较 高 ， 可 以 充分 展 
示 我 们 作品 的 图 片 。 当 然 ， 导 航 到 底下 的 内 容 也 不 难 ， 用 户 可 以 先 了 解 每 一 项 的 大 致 情 
况 ， 然 后 决定 深入 阅读 哪 块 内 容 。 通 过 把 重要 的 链接 做 成 大 按钮 ， 从 视觉 上 突出 了 重要 
的 操作 ， 可 以 起 到 吸引 用 户 点 击 的 作用 ， 而 且 就 算是 手指 粗大 的 用 户 都 可 以 轻易 点 触 。 
为 了 便于 维护 ， 我 们 决定 只 考虑 两 个 主要 的 断 点 。 在 小 于 768px 的 小 屏幕 中 使 用 单 栏 布 
局 ， 否 则 就 切换 到 一 个 三 栏 布局 : 


























Bootstrappin ^ 











Welcome! Recent Updates Our 


Suspe 


Team 


di 

















在 这 个 针对 大 屏幕 的 设计 效果 图 中 ， 可 以 发 现下 列 功能 : 

口 位 于 项 部 的 导航 条 ， 而 且 各 导航 项 都 附带 图 标 ; 

O 宽屏 版 的 图 片 传送 带 ， 其 中 的 图 片 拉 伸 至 与 浏览 器 窗 口 同 宽 ; 
a 三 栏 布 局 分 别 容纳 三 块 文本 内 容 ; 

a 页 脚 在 布局 中 水 平 居 中 。 
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这 个 设计 的 配色 很 简单 ， 只 有 灰 阶 和 用 于 链接 和 突出 显示 的 金 绿色 。 
明确 了 设计 目标 ， 接 下 来 就 可 以 布置 内 容 了 。 

22 ”查看 练习 文件 


我 们 来 看 看 这 个 练习 用 的 文件 , 就 在 本 书 源 代码 的 02_ Code BEGIN 文件 夹 中 。 看 起 来 这 
里 的 文件 与 第 1 章 中 模板 文件 夹 差不多 。 





男 404.html 

8 apple-touch-icon-precomposed.png 
* | crossdomain.xml 
i css 

B. favicon.ico 

LJ fonts 

æ humans.txt 

Lu img 

i, index.html 
ig js 

LJ less 

= LICENSE.md 

ii, README.md 

iT robots.txt 











新 增 的 一 些 内 容 如 下 。 
O less 文件 夹 里 有 一 些 改动 ， 但 我 们 不 着 急 介 绍 ， 还 是 先 看 看 与 内 容 与 关 的 变化 吧 。 
O img 文件 夹 现在 包含 5 张 图 片 : 
m 15K Logo 图 片 ， 名 为 logo.png; 
u 4 张 作 品 图 片 。 
O index.html 的 改动 之 处 如 下 : 


m 导航 栏 更 新 了 ， 以 反映 新 站 点 的 架构 ; 

m 图片、 内 容 块 、 页 脚 中 Logo 和 社交 链接 都 有 了 各 自 基本 的 标记 。 

与 第 1 章 中 的 导航 栏 不 同 ， 此 时 的 传送 带 、 分 栏 和 图 片 都 没有 添加 Bootstrap 类 。 可 以 在 
浏览 器 中 看 一 看 结果 。 

打开 页 面 后 ， 可 以 看 到 导航 栏 后 面 就 是 作品 图 片 : 
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E JOSH MCD( 


JOSH INAUGURAL € 
CDOWELL Nov 14 - 15,2013 











作品 图 片 后 面 就 是 文本 块 和 包含 一 组 社交 链接 的 页 脚 ，; 





Welcome! 


Buspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit 
aculis tincidunt. Donec at ultrices est. 


Recent Updates 


Buspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit 
aculis tincidunt. Donec at ultrices est. 


Our Team 


Buspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit 
jaculis tincidunt. Donec at ultrices est 











nnnnnmnmmnmnnnmnnmnmnmrnmrnmnmrmrmr http: //blog.si na. comcrn/u 3283485963 


28 


第 2 章 作品 展示 站 点 





2.3 








我 们 从 添加 Bootstrap 类 着 手 ,这 样 可 以 利用 Bootstrap 默认 的 CSS 样式 和 JavaScript 行 为 ， 
迅速 搭建 起 基本 的 界面 元 素 。 


搭建 传送 市 


下 面 先 来 搭建 传送 带 ， 传送带 会 循环 展示 我 们 作品 的 4 张 特写 图 片 。 


Bootstrap 传送 带 的 标记 结构 可 以 在 其 文档 页 面 找到 ，URL 为 : http://getbootstrap.com/ 
Javascript/#carousel。 


可 以 按照 示例 中 的 结构 设置 其 中 的 元 素 。 以 下 代码 就 是 传送 带 的 所 有 标记 ， 包含 各 个 部 
分 ， 首 先是 进度 指示 器: 


«div id-"homepage-feature" class-"carousel slide"> 

«ol class-"carousel-indicators"» 

«li data-target-"4homepage-feature" data-slide-to-"0" 
class-"active"'»«/li» 

«li data-target-"4£homepage-feature" data-slide-to-"1"»«/li» 
«li data-target-"4homepage-feature" data-slide-to-"2"»«/li» 
«li data-target-"4homepage-feature" data-slide-to-"3"»«/li» 

«/ol» 





























整个 传送 带 是 一 个 带 ID 属性 ( id-2"homepage-feature" ) 的 div 标签, H carousel 
类 用 于 把 Bootstrap 的 传送 带 CSS 应 用 到 这 个 元 素 , 为 指示 器 、 传 送 带 项 和 前 一 张 及 后 一 
张 控 件 添 加 样式 。 

进度 指示 需 的 data-target 属性 必须 使 用 传送 带 的 ID homepage-feature。 有 了 这 个 
属性 ，JavaScript 插件 才能 为 活动 的 传送 带 项 添加 active 类 。 在 此 我 们 预先 为 第 一 个 指 
示 器 添加 了 active 类 。 然 后 ， 类 的 切换 就 由 JavaScript 控制 了 。 它 会 删除 第 一 个 指示 器 
的 这 个 类 ， 再 添加 到 后 续 指 示 器 ， 如 此 循环 。 

此 外 ,还 要 注意 data-slide-to 的 值 从 0 开始 , 5j JavaScript 和 其 他 编程 语言 一 样 。 记 
住 : 从 0 开始 ,不 是 从 1 开始 。 


指示 器 后 面 , 是 类 为 carousel-inner 的 元 素 。 这 个 元 素 是 所 有 传送 带 项 (item ), 也 就 
是 所 有 图 片 。 


carousel-inner 元 素 内 部 是 传送 带 项 , 是 一 组 div 标签 , 每 个 都 带 着 class="item"。 
巴 第 一 项 修改 成 包含 item 和 active 两 个 类 ， 使 其 一 开始 就 可 见 。 


此 时 的 标记 结构 如 下 所 示 : 


«!-- Wrapper for slides --> 
«div class-"carousel-inner"'- 
«div class-"item active"- 
«img src-"img/okwu-athletics.jpg" alt-"OKWU Athletics Homepage"'» 
«/div» 



























































A 
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«div class-"item"- 
«img src-"img/okwu.jpg" alt-"OKWU.edu Homepage"» 
«/div» 
«div class-"item"- 
«img src-"img/bso.jpg" alt-"Bartlesville Symphony Homepage" 
«/div» 
«div class-"item"- 
«img src-"img/alittlecode.jpg" alt-"aLittleCode.com Homepage"» 
</div> 
</div><!-- /.carousel-inner --> 


传送 带 项 之 后 ， 还 需要 添加 传送 带 控件 ， 用 于 在 传送 带 左 、 右 两 侧 显示 前 一 个 和 后 一 个 
按钮 。 你 会 发 现 其 中 有 类 对 应 着 Glyphicon 字体 图 标 。 在 控件 后 面 ， 我 们 再 用 一 个 结束 
div 标签 关闭 整个 传送 带 。 


<!-- Controls --> 
«a class-"left carousel-control" href="#homepage-feature" data-slide-"prev"'» 
«span class="glyphicon glyphicon-chevron-left"»«/span» 
«/a» 
«a class-"right carousel-control" href-"tfhomepage-feature" data-slide-"next"» 
«span class="glyphicon glyphicon-chevron-right"»«/span-» 
«/a» 
«/div»«!-- /tfhomepage-feature.carousel --> 











每 个 传送 带 控件 (carousel-controls) 的 href 属性 必须 是 最 外 转 
~ 一 传送 带 元 素 的 ID 值 (#homepage-feature )。 





添加 以 上 代码 之 后 , 请 保存 并 刷新 浏览 器 。Bootstrap 的 样式 和 JavaScript 都 应 该 生效 ,页 
面 中 的 图 片 应 该 变 身 成 为 滚动 的 传送 带 ! 
默认 情况 下 , 传送 带 的 幻灯 片 每 5 秒 切 换 一 次 。 为 了 充分 展示 我 们 的 作品 , 可 以 改 成 8 秒 。 
(1) 打开 js/main.js 
D 添加 以 下 代码 。 这 里 先 用 jQuery 方法 检测 相应 的 页 面 元 素 是 否 存在 , 如 果 存 在 则 将 传 

送 带 的 间隔 时 间 初 始 化 为 8000 毫秒 。 

$( document ).ready(function() ( 

$('.carousel').carousel(( 
interval: 8000 


)); 
i 


(3) 保存 并 刷新 。 你 会 看 到 间隔 时 间 加 长 到 了 8 P 
相关 的 选项 可 以 参考 Bootstrap 传送 带 的 文档 : http://getbootstrap.com/javascript/#carousel。 


关于 定制 传送 带 及 其 指示 器 和 图 标的 样式 ， 本 章 后 面 再 讨论 。 我 们 接 下 来 继续 看 如 何 利 
用 Bootstrap 默认 的 样式 ， 为 传送 带 下 面 的 内 容 块 设 置 响应 式 网 格 。 
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2.4 


创建 响应 式 分 栏 


页 面 中 有 三 块 文本 ， 每 块 都 有 标题 、 段 落 和 链接 。 在 大 于 等 于 平板 电脑 的 屏幕 上 ， 我 们 
希望 内 容 分 三 栏 ， 而 在 较 窗 的 屏幕 上 ， 我 们 希望 内 容 变 成 一 栏 全 宽 。 

建议 大 家 花 点 时 间 熟 悉 一 下 Bootstrap 移动 优先 的 响应 式 网 格 ， 文档 地 址 是 : 
http://getbootstrap.com/ess/Zgrid o 


简单 地 说 , Bootstrap 内 置 12 栏 网 格 系统 , 其 基本 的 类 结构 支持 co1-12 表示 全 宽 , col-6 
表示 半 宽 ，col1-4 表示 三 分 之 一 宽 ， 以 此 类 推 。 


在 Bootstrap 3 中 ， 由 于 创造 性 地 使 用 了 媒体 查询 ， 网 格 系统 具有 极 强 的 适应 力 。 如 前 所 
述 ， 我 们 希望 欢迎 消息 在 比 平板 小 的 屏幕 中 呈现 为 一 栏 全 宽 ， 而 在 大 约 768px 时 变 成 三 
分 之 一 栏 宽 。 巧 合 的 是 ，Bootstrap 内 置 的 小 屏幕 断 点 恰好 是 768px ， 也 就 是 
escreen-sm-min 变量 的 默认 值 。 而 大 于 768px 的 中 屏幕 断 点 是 992px， 对 应 变量 是 
@screen-md-min。 然后 , 大 于 1200px 断 点 的 算 大 屏幕 。 这 几 个 断 点 我 们 后 面 统称 为 小 、 
中 、 大 断 点 。 


小 断 点 有 一 个 特殊 的 栏 类 命名 法 : col-sm-。 因 为 我 们 想 在 小 断 点 之 上 使 用 三 栏 ， 所 以 
这 里 使 用 class="col-sm-4"。 这 样 在 小 断 点 之 下 ， 分 块 元 素 会 保持 全 宽 ， 而 在 小 断 点 
之 上 ， 则 会 各 占 三 分 之 一 宽 并 肩 排列 。 完 整 的 结构 如 下 所 示 ， 为 简明 起 见 ， 段 落 内 容 作 
了 和 省 略 处 理 : 


«div class-"container"- 
«div class="row"> 
«div class-"col-sm-4"- 
<h2>Welcome!</h2> 












































<p>Suspendisse et arcu felis ...</p> 
<p><a href="#">See our portfolio</a></p> 
</div> 


<div class="col-sm-4"> 
<h2>Recent Updates</h2> 


<p>Suspendisse et arcu felis ...</p> 
<p><a href="#">See what's new!</a></p> 
</div> 


<div class="col-sm-4"> 
«h2»0ur Team</h2> 


<p>Suspendisse et arcu felis ...</p> 
<p><a href="#">Meet the team!</a></p> 
</div> 
</div><!-- /.row --> 
«/div»«!-- /.container --> 


下 面 解释 一 下 container 和 row 类 的 作用 : 


O container 类 用 于 约束 内 容 的 宽度 ， 并 使 其 在 页 面 内 居中 ; 
O row 类 用 于 包装 三 个 栏 ， 并 为 栏 间 留 出 左右 外 边 距 ; 
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O container 类 和 row 类 都 设 定 了 清除 , 因而 它们 可 以 包含 浮动 元 素 , 同时 又 清除 之 前 


的 浮动 元 素 。 





现在 ， 保 存 并 刷新 。 在 浏览 器 窗口 宽度 超过 768px 时 ， 应 该 看 到 下 图 所 示 的 三 栏 布局 : 











Welcome! 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In 
non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Recent 
Updates 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In 


Our Team 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In 
non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 





non purus quis elit iaculis 


tincidunt. Donec at ultrices est. Meet the tear 


See what's new 























把 窗口 缩小 到 768px 以 下 ， 又 会 看 到 三 栏 变 成 了 一 栏 : 








Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. 
Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus 
quis elit iaculis tincidunt. Donec at ultrices est. 


See our portfolio 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. 
Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus 
quis elit iaculis tincidunt. Donec at ultrices est. 


See what's new! 


Our Team 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. 
Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus 
quis elit iaculis tincidunt. Donec at ultrices est. 








Meet the team! 





好 ， 这 样 就 利用 响应 式 网 格 系统 完成 了 响应 式 分 栏 ， 接 下 来 我 们 要 利用 Bootstrap 的 按钮 
样式 ， 把 内 容 分 块 中 的 链接 做 成 突出 的 效果 。 


2.5 ”把 链接 变 成 按钮 


把 重要 的 内 容 链接 转换 成 突出 显示 的 按钮 很 简单 。 为 此 要 用 到 如 下 几 个 关键 的 类 : 

口 btn 类 用 于 把 链接 变 成 按钮 的 样式 ; 

O btn-primary 类 用 于 把 按钮 变 成 主 品牌 颜色 ; 

O pull-right 类 用 于 把 链接 浮动 到 右 侧 ,使 其 占据 更 大 的 空间 ,从 而 更 便于 发 现 和 点 击 。 
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把 上 述 这 几 个 类 添加 到 三 个 内 容 块 末尾 的 链接 上 : 


<p><a class="btn btn-primary pull-right" href="#">See our portfolio«/a»«/p» 


保存 并 刷新 ， 应 该 能 够 看 到 类 似 下 图 所 示 的 结果 : 











Welcome! 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In 
non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


我 们 又 前 进 了 一 大 步 。 关 键 的 内 容 元 素 已 经 基本 成 型 了 。 

在 基本 的 标记 结构 就 位 的 条 件 下 , 接 下 来 可 以 进行 微调 了 。 为 此 需要 用 到 自 定 义 的 CSS, 
而 我 们 要 借 此 机 会 体验 一 下 Bootstrap 的 LESS 文件 的 强大 威力 。 不 熟悉 LESS 也 不 必 担 
心 ， 我 会 一 步 一 步 教 你 怎么 做 。 














2.6 理解 LESS 


本 节 我 们 会 学 习 创 建 、 编 辑 、 定 制 一 些 LESS 文件 ， 以 便 为 我 们 的 设计 生成 期 望 的 CSS。 














如 果 你 不 太 了 解 LESS， 和 希望 进一步 学 习 ， 可 以 参考 以 下 链接 。 


口 LESS 文档 : http:;//lesscss.org/Zdocs ; 
Q Sitepoint 网 站 关于 LESS 的 完整 介绍 : http://www.sitepoint.com/a- 





comprehensive-introduction-to-less/ ; 


简 言 之 ， 使 用 LESS 预 处 理 需 来 生成 CSS 是 一 件 既 令 人 激动 义 十 分 轻松 的 事 。 接 下 来 我 
们 就 具体 讨论 。 








2.6.1 BEI 


.navbar-nav ( ... ) 

.navbar-nav » li ( s 

.navbar-nav > li» a ( ... ) 

.navbar-nav > li > a:hover, 
- > 


.navbar-nav Ix arfócus (4... 
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其 中 这 些 相同 的 选择 符 用 LESS 写 会 简洁 很 多 ， 只 要 使 用 一 个 简单 的 嵌 套 即 可 : 


.navbar-nav { ... 
2 I0 2x4 
Bu cY. ue 
&:hover, 
&cfocus [ a.. F} 


编译 后 ， 这 些 规则 会 生成 标准 的 CSS。 但 LESS ICE LUE AES, que A HET S 





2.6.2 ”变量 


使 用 变量 可 以 让 我 们 只 设 定 ( 或 修改 ) 一 次 ， 就 能 自动 影响 (更 新 ) 整个 样式 表 中 用 到 
该 值 的 属性 。 比 如 ， 可 以 像 下 面 这 样 使 用 颜色 变量 


Goff-white: #e5e5e5; 
Gbrand-primary: 4890000; 


在 这 些 变量 的 值 变化 后 , 可 以 自动 将 它们 更 新 到 整个 站 点 。 这 是 因为 我 们 在 LESS 文件 中 
使 用 了 这 些 变 量 


a (t 
color: QGbrand-primary; 
H 
.navbar { 
background-color: Gbrand-primary; 
seg osa. t 
color: QGoff-white; 








2.6.3 混入 


混入 可 以 让 生成 整套 规则 更 方便 也 更 容易 管理 。 比 如 ， 可 以 利用 它 简 化 为 元 素 应 用 
border-box 属性 的 任务 。 在 CSS 中 ， 要 涵盖 所 有 浏览 需 ， 需 要 用 到 每 种 浏览 需 的 供应 
商 前 级 ， 为 此 针对 每 个 元 素 都 要 写 三 行 相同 的 声明 ， 而 且 还 要 记 住 每 一 种 前 级 的 写法 : 


.box { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 





























} 


在 LESS 中 ， 可 以 只 个 供 混入 的 规则 ， 后 面 则 可 以 通过 eboxmoaqael 参数 来 指定 期 望 
的 盒 模型 : 
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2.6.4 


2.6.5 


.box-sizing(Gboxmodel) ( 
-webkit-box-sizing: QGboxmodel; 
-moz-box-sizing: QGboxmodel; 
box-sizing: QGboxmodel; 


) 
然后 就 可 以 在 需要 的 地 方 使 用 这 个 混和 人 了 : 


.box ( 
.box-sizing (border-box); 
} 
.another-element { 
.box-sizing (border-box); 


} 
编译 之 后 ， 还 会 为 每 个 元 素 生成 三 行 CSS。 








运算 式 

通过 运算 式 可 以 基于 变量 实现 数学 计算 。 比 如 ， 可 以 将 一 种 颜色 作为 基准 ， 对 其 进行 加 
亮 和 减 暗 处 理 : 

a:hover { darken (@link-color, 15%); } 


还 可 以 计算 内 边 距 的 值 ， 以 适应 导航 条 的 高 度 。 比 如 ， 以 下 Bootstrap 的 navbar.less 文件 
中 的 代码 ， 就 将 导航 项 的 内 边 距 值 设 定 为 导航 条 高 度 减 去 行 高 之 后 剩余 的 高 度 值 。 然 后 ， 
把 这 个 值 一 分 为 二 ， 平均 应 用 为 项 部 和 底部 内 边 距 


.navbar > li >a { 
padding-top: ((@navbar-height - @line-height-computed) / 2); 
padding-bottom: ((@navbar-height - @line-height-computed) / 2); 
} 











导入 文件 


LESS 编译 需 支 持 导入 并 组 合 多 个 文件 , 最 终生 成 一 个 统一 的 CSS 文件 。 我 们 可 以 指定 导 
入 的 次 序 ， 按 照 需要 的 层 生 关系 精确 组 织 结果 样式 表 。 


Bootstrap 的 导入 文件 bootstrap.less 一 开始 导入 了 基本 的 变量 和 混入。 然后, 又 导 人 了 ( 代 
Tk CSS 重 置 样式 表 的 ) normalize.css 的 LESS 版 ， 之 后 是 对 打印 媒体 的 基本 样式 
(printless )、 基 本 的 全 局 样式 ( scaffolding.less ) 和 排版 样式 (type.ess )。 结 果 这 个 
bootstrap.less 文件 的 开头 几 行 就 是 这 样 的 : 


// Core variables and mixins 
Gimport "variables.less"; 
Gimport "mixins.less"; 






































// Reset 
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QGimport "normalize.less"; 
Gimport "print.less"; 


// Core CSS 
QGimport "scaffolding.less"; 
QGimport "type.less"; 


而 最 终 得 到 的 将 是 一 个 统一 的 CSS AF, PERAJA ARRA, EER 
们 想 要 的 。 


2.6.6 ”模块 化 um 


把 多 个 文件 导入 并 输出 成 一 个 文件 ， 可 以 让 我 们 更 方便 地 组 织 样式 ， 对 它们 进行 分 组 ， 
并 在 不 同 的 文件 中 对 它们 进行 维护 。 这 也 是 Bootstrap 会 带 有 那么 多 LESS 文件 的 原因 ， 
导航 条 有 一 个 ， 按 钮 有 一 个 ， 警 告 框 有 一 个 ， 传 送 带 有 一 个 …… ， 而 所 有 这 些 都 会 被 导 
入 到 bootstrap.less 文件 。 

正 因为 上 述 原因 , LESS 及 其 他 CSS 预 编译 器 才 会 变 得 如 此 流行 。 它们 已 经 成 为 专业 Web 
开发 不 可 或 缺 的 一 个 重要 部 分 。 多 数 开 发 人 员 都 认为 这 正 是 CSS 的 发 展 方向 。 























2.7 ”根据 需要 定制 Bootstrap 的 LESS 文件 


在 定制 Bootstrap 的 LESS 文件 期 间 ， 我 们 会 发 挥 很 大 的 主观 能 动 性 ， 具 体 如 下 : 

口 组 织 less 文件 夹 ， 以 便 灵 活 、 自 由 地 实现 我 们 需要 ， 同 时 也 让 将 来 的 维护 者 更 方便 ; 
O HEX Bootstrap 提供 的 几 个 LESS 文件 ; 

a 创建 几 个 新 的 LESS 文件 ; 

口 为 站 点 整合 一 套 较 大 的 字体 图 标 ， 数 量 翻 倍 ， 并 将 图 标 运用 于 社交 媒体 链接 。 
换 名 话说， 我 们 可 不 光 是 要 学 习 应 用 Bootstrap 的 约定 ， 还 要 发 挥 自 己 的 创造 力 。 

在 本 章 的 练习 文件 中 ， 打 开 less 文件 来。 打开 后 ， 可 以 看 到 下 图 所 示 的 目录 结构 : 

















£ less 
. main.less 
Y 区 bootstrap 
alerts.less 


badges.less 
bootstrap.less 
breadcrumbs.less 








为 方便 起 见 ， 我 已 经 把 Bootstrap 的 LESS 文件 提前 集中 到 了 bootstrap 子 文件 夹 下 面 。 
文件 _main.less 是 bootstrap.less 的 重 命名 版 ， 它 导入 了 其 他 所 有 文件 ， 将 来 就 是 通过 编译 
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它 来 基于 所 有 导入 的 LESS 文件 生成 一 个 统一 的 样式 表 。 打 开 _main.less 后 ， 你 会 发 现 它 
绝 大 部 分 内 容 与 bootstrap.less 一 样 ， 只 不 过 导入 文件 的 路 径 中 多 了 一 个 bootstrap 文件 夹 。 


// Core variables and mixins 
Gimport "bootstrap/variables.less"; 
Gimport "bootstrap/mixins.less"; 


为 什么 要 多 此 一 举 呢 ? 因为 我 们 很 快 就 要 创建 自己 的 LESS 文件 了 。 这 样 一 来 , 我 们 创建 
的 文件 就 不 会 与 Bootstrap 内 置 的 文件 混淆 ， 便 于 调整 。 

或 许 有 读者 会 问 ， 为 什么 这 个 文件 名 开头 要 使 用 两 个 下 划 线 ?事实 上 ,原因 有 四 。 

O 按 字母 排序 时 ， 下 划 线 可 以 让 文件 排 在 前 头 。 

a 它 不 是 我 们 唯一 的 自 定义 文件 ， 如 果 其 他 自 定义 文件 只 使 用 一 个 下 划 线 ， 那 么 它 就 显 
得 更 突出 。 

O 采用 这 种 命名 方式 ， 更 便于 我 们 扫描 或 搜索 自 定义 文件 。 由 于 下 划 线 比较 显眼 ， 所 以 
在 搜索 时 ， 只 输入 一 个 下 划 线 ， 就 可 以 列 出 所 有 自 定义 文件 。 

口 同时 打开 多 个 文件 编辑 时 ， 带 下 划 线 的 文件 名 也 容易 让 我 们 找到 相应 的 标签 页 。 

优点 不 少 吧 ， 下 面 开始 自 定义 ! 先 从 自 定义 Bootstrap 变量 和 添加 新 变量 开始 。 





























自 定义 变量 
按照 惯例 ， 我 们 先 复制 一 份 Bootstrap 的 变量 文件 ， 然 后 对 其 进行 修改 。 
(1) 找到 less/bootstrap 文件 夹 中 的 variables.less 文件 ， 在 编辑 器 中 打开 它 。 


(2) 浏览 一 下 这 个 文件 , 会 发 现 各 种 变量 , 有 定义 基本 颜色 值 的 , 有 定义 页 面 背景 颜色 的 ， 
有 定义 字体 的 , 还 有 定义 导航 条 和 背景 高 度 的 , 等 等 。 看 起 来 很 好 , 但 改动 一 下 更 妙 。 
改动 之 前 ， 我 们 先 另 存 一 个 副本 ， 以 防 将 来 改 坏 ， 好 恢复 。 

(3) 把 副本 另存 到 bootstrap 文件 夹 外 部 , 在 less 文件 夹 的 ”main.less 文件 旁边 。 为 表示 它 

是 自 定 义 文 件 ， 在 原文 件 夹 前 添加 一 个 下 划 线 ， 变 成 _variables.less。 

现在 ，less 文件 夹 的 截图 如 下 所 示 : 



































...] less 
. main.less 
.variables.less 
|] bootstrap 





下 面 我 们 就 来 自 定 义 颜色 。 
(1) 在 新 _variables.less 文件 的 最 开始 ， 可 以 看 到 Bootstrap 为 灰色 和 品牌 色 定义 的 默认 变 
量 及 其 值 。 这 里 的 灰色 值 是 基于 黑色 按 比 例 计算 的 ， 使 用 了 LESS 的 lighten KÆ: 
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QGgray-darker: lighten(4000, 13.5%); // #222 
Ggray-dark 


Q) 我 们 知道 自己 想 要 的 值 ， 因 此 直接 替换 即 可 〈 你 也 可 以 尝试 一 下 使 用 计算 的 值 ) 25 
后 再 增加 两 个 变量 ， 以 涵盖 我 们 需要 的 完整 灰 度 空 间 。 

















G) 结果 如 下 : 
@gray-darker: #222; 
@gray-dark: #454545; 
@gray: #777; 
@gray-light: #aeaeae; 
@gray-lighter: #ccc; 
@gray-lightest: #ededed; 
@off-white: #fafafa; 


接 下 来 再 更 新 品牌 颜色 中 的 abrand-primary 变量 ， 将 其 改 为 金黄 色 : 


// Brand colors 





Gbrand-primary: #c1ba62; 
要 看 结果 ， 需 要 导 人 这 些 新 变量 并 重新 编译 生成 CSS。 
1. 导入 新 变量 
我 们 得 更 新 _main.less， 导 入 新 的 _variables.less 文件 。 


(1) 在 _main.less 中 ， 找 到 导入 文件 bootstrap/variables.less 的 代码 。 这 是 导入 的 第 一 
fr, 在 第 12 行 。 

(2) 修改 这 行 代 码 ， 导 入 新 的 _variables.less 文件 。 很 简单 ， 删 掉 路 径 中 的 bootstrap/， 然 后 
给 文件 名 加 上 一 个 下 划 线 。 


@import " variables.less"; 


(3) 接 下 来 编译 生成 CSS。 如 果 你 之 前 还 没 编译 过 , 那 赶 紧 把 这 个 项 目 添加 到 你 的 编译 需 。 




































































你 的 编译 器 可 能 需要 你 刷新 文件 视图 才能 看 到 这 个 新 的 _variables.less 文 
件 ， 并 将 它 添加 到 项 目 。( 反 正 CodeKit 需要 。) 




















(4) 选择 ”main.less 进行 编译 。( 如 果 有 最 小 化 或 压缩 选项 ， 可 以 选中 。 ) 
(5) 将 输出 路 径 设 置 为 css/main.css。( 这 个 文件 是 index.html 中 链接 的 样式 表 文 件 。) 


如 果 在 你 的 编译 器 里 不 好 删除 编译 后 文件 名 前 的 下 划 线 ， 可 以 修改 
index.html1， 让 它 链 接 到 文件 名 带 下 划 线 的 样式 表 文件 。 


(6) 编译 ! 然后 在 浏览 絮 中 刷新 index.html, 
如 果 这 一 步 成 功 , 那么 链接 和 类 为 btn-primary 的 按钮 颜色 都 会 发 生变 化 , 因为 它们 使 
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用 的 都 是 变量 abrand-primary 的 颜色 。 

2. 编辑 导航 条 变量 

下 面 ， 我 们 来 编辑 设 定 导航 条 高 度 、 颜 色 和 基 停 效果 的 变量 。 

(1) fE variables.less 中 ,搜索 到 下 列 变量 ， 并 修改 为 下 列 值 。 这 样 一 来 ， 就 可 以 增加 导航 
条 的 高 度 、 把 品牌 色 应 用 给 链接 ， 同 时 利用 其 他 相关 的 颜色 变量 。 























enavbar-height : 64px; 
Qnavbar-margin-bottom: 0; 
navbar-default-color: QGgray; 
Gnavbar-default-bg: #fff; 
GaGnavbar-default-border: Ggray-light; 


// Navbar links 


QGnavbar-default-link-color: Gnavbar-default-color; 
QGnavbar-default-link-hover-color: Qlink-hover-color; 
Qnavbar-default-link-hover-bg: Goff-white; 
Qnavbar-default-link-active-color: Glink-hover-color; 
Qnavbar-default-link-active-bg: Ggray-lightest; 
Qnavbar-default-link-disabled-color: Ggray-lighter; 
QGnavbar-default-link-disabled-bg: transparent; 


O) 保存 修改 、 编 译 并 刷新 。 

你 应 该 看 到 下 列 有 关 导 航 条 的 新 特性 。 

口 高 度 应 该 增加 了 14px; 

OQ 背景 应 该 变 成 了 白色 ; 

OQ 底部 边框 稍微 变 暗 了 一 些 ; 

口 导航 项 的 背景 应 该 在 悬 停 时 稍 暗 一 点 ; 

口 导航 项 的 背景 应 该 在 活动 时 稍 瞳 一 些 ; 

口 链接 文本 的 颜色 应 该 在 悬 停 和 活动 时 变 成 品牌 色 ， 如 下 图 所 示 : 
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接 下 来 ,我 们 把 Logo 放置 到 位 。 


添加 Logo 图 片 


在 img 文件 夹 里 找到 logo.png 文件 。 你 会 发 现 这 个 图 片 非 常 大 ， 有 900px 宽 。 在 我 们 最 
终 的 设计 中 , 这 个 Logo 只 有 120px 宽 。 因 为 多 出 来 的 像素 将 被 压缩 到 较 小 的 空间 内 ， 所 
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以 这 也 是 一 种 让 图 片 在 所 有 设备 ( 包括 视网膜 屏 设备 ) 中 保持 清晰 的 一 种 简便 方法 。 与 
此 同时 ， 这 个 图 片 的 尺寸 也 针对 Web 进行 了 优化 ， 只 有 19 KB。 
好 ， 下 面 我 们 就 把 它 放置 到 位 并 限制 其 宽度 。 
(1) 在 编辑 器 中 打开 index.html, 
D 搜索 到 导航 条 标记 中 这 一 行 代码 : 
<a class="navbar-brand" href="index.html">Bootstrappin'</a> 
(3) 把 这 里 的 文本 Bootstrappin' 蔡 换 成 img 标签 ， 并 添加 alt 和 width 属性 。 


«img src-"img/logo.png" alt-"Bootstrappin'" width="120"> 














| Q 一 定 要 设置 width 属性 ， 并 将 值 设置 为 120px。 否 则 ， 图 片 会 非常 大 。 ] 


(4) 保存 index.html 并 刷新 浏览 器 ， 你 会 看 到 Logo 已 经 出 现在 了 相应 的 位 置 上 。 
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此 时 ， 导 航 条 高 度 增加 了 ， 其 底 边 也 不 再 跟 活动 导航 项 的 底 边 对 齐 了 。 这 是 因为 
navbar-brand 元 素 周 围 设 定 了 内 边 距 ， 我 们 得 再 调整 一 下 相应 内 边 距 的 值 。 只 需要 以 
下 简单 几 步 。 

(1) 在 编辑 器 中 打开 bootstrap/navbar.less 文件 。 

(2) 搜索 到 这 个 选择 符 及 花 括号 : .navbar-brand {o 

(3) 大 约 在 第 150 行 ， 可 以 看 到 如 下 代码 : 这 里 的 padding 就 是 我 们 要 修改 的 。 


.navbar-brand { 
float: left; 
padding: @navbar-padding-vertical Gnavbar-padding-horizontal; 


(4) 因为 我 们 想 自 定义 这 个 文件 ， 所 以 先 将 其 男 存 为 _navbar.less。 
(5) 把 它 保存 在 less 文件 夹 中 ,与 ”main.less 、_variables.less 在 一 块 。 




















| less 
. main.less 
.navbar.less 
1 .variables.less 
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(6) 下 面 把 原来 的 声明 注释 掉 ， 再 添加 我 们 自 定 义 的 内 边 距 声明 。 在 LESS 中 ,注释 只 要 
在 原先 代码 前 添加 两 个 斜 杠 即 可 。 
// padding: @navbar-padding-vertical @navbar-padding-horizontal; 
padding: 22px 30px 0 15px; 
编译 时 ， 被 注释 掉 的 代码 不 会 被 编译 成 CSS。 
(7) 要 看 结果 ， 先 在 _navbar.less 文件 中 作 如 上 修改 ， 然 后 保存 。 
(8) 然后 ,在 _main.less 中 找到 并 把 导入 原先 Bootstrap 的 navbar.less 文件 的 代码 注释 掉 。 
然后 ， 紧 接着 添加 导入 _navbar.less 文件 的 代码 。 
// Qimport "bootstrap/navbar.less"; 
@import " navbar.less"; 
(9) 保存 文件 。 确 保 把 _navbar.less 添加 到 编译 器 ， 然 后 把 _main.less 编译 为 css/main.css。 
刷新 浏览 器 ， 应 该 看 到 导航 栏 底 边 已 经 与 活动 链接 的 底 边 对 齐 了 。( 你 还 会 发 现 Logo 
与 Home 链接 之 间 的 间隔 也 变 大 了 。) 
(10) 现在 再 用 编辑 器 打开 main.css， 搜 索 到 .navbar-brand{。 
如 果 CSS 输出 已 经 压缩 ， 看 到 的 结果 应 该 是 这 样 的 : .navbar-brand{float:left; 
padding:22px 30px 0 15px;. 
注释 掉 的 那 行 声明 并 没有 出 现 ， 因 为 LESS 就 没有 把 那 行 代码 编译 到 
和 一 CSS 中 ! 
LESS 的 威力 再 次 给 我 们 留 下 了 深刻 印象 。 简 单 总 结 一 下 我 们 都 二 了 什么: 
口 我 们 并 没有 动 原始 的 bootstrap/navbar.less 文件 ， 因 此 如 果 需 要 可 以 随时 恢复 原状 ; 
a 我 们 完全 用 自己 的 定制 版 替换 了 这 个 文件 ， 只 是 _main.less 里 面 的 注释 为 我 们 留 下 了 
改动 的 痕迹 ; 
O 我 们 还 在 _navbarless 中 注释 掉 一 行 代码 ， 这 样 就 可 以 知道 修改 了 什么 规则 ; 
口 不 过 , 由 于 我 们 使 用 的 是 JavaScript 风格 的 单行 注释 , 所 有 被 注释 掉 的 规则 都 不 会 被 编 
译 进 最 终 的 CSS 文件 。 
换 名 话说， 我们 为 自己 留 下 了 足够 多 的 退路 和 相应 的 注释 ， 同 时 并 没有 造成 代码 膨胀 。 
不 错 ! 
2.9 调整 导航 项 内 边 距 





现在 ， 我 们 来 调整 一 下 导航 项 ， 以 便 链 接 文 本 与 Logo 位 于 同一 基线 之 上 。 


在 _navbar.less 中 , 找到 选择 符 .navbar-nav, 这 是 导航 项 的 父 元 素 ulo 在 相应 的 规则 里 ， 
可 以 看 到 骸 套 的 媒体 查询 。( 关于 骨 套 媒体 查询 , 可 以 参考 LESS X: http://lesscss.org。 ) 
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2.10 


相关 的 行 如 下 所 示 : 


// Uncollapse the nav 
Gmedia (min-width: @grid-float-breakpoint) ( 
float: left; 
margin: 0; 


ou i 
float: left; 
=a 
padding-top: ((@navbar-height - @line-height-computed) / 2); 
padding-bottom: ((@navbar-height - @line-height-computed) / 2); 


} 
} 
} 

这 里 的 变量 @griqd-float-breakpoint 指定 了 一 个 临界 宽度 ， 大 于 这 个 宽度 ， 导 航 条 
就 会 扩展 到 与 屏幕 同 宽 ;小 于 这 个 宽度 ， 导 航 条 就 会 折 丢 起 来 变 成 移动 应 用 风格 的 响应 
式 导航 。( 这 个 变量 是 在 _variables.less 中 定义 的 。) 
HJE, padding-top 和 padding-bottom 值 都 是 动态 计算 的 ， 以 确保 导航 项 中 的 文本 
垂直 居中 。 而 我 们 想 增 加 上 内 边 距 ， 减少 下 内 边 距 。 与 此 同时 ,我们 还 要 扩大 导航 项 的 
间隔 ， 再 把 字号 增 大 一 些 。 同 样 ， 把 原来 的 代码 使 用 单行 注释 注释 掉 ， 把 需要 的 规则 写 
在 下 面 : 



































»atí 
// padding-top: ((8navbar-height - Gline-height-computed) / 2); 
// padding-bottom: ((Gnavbar-height - Gline-height-computed) / 2); 


padding: 30px 30px 14px; 
font-size: 18px; 


保存 、 编 译 并 刷新 浏览 器 ， 可 以 看 到 如 下 效果 : 
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人 够 强 吧 ? 
再 看 图 标的 。 
添加 图 标 


现在 轮 到 为 导航 项 添加 图 标 了 。 我 们 先 直 接 使 用 Boostrap 自 带 的 Glyphicons， 然 后 再 尝 
斌 一 下 Font Awesome 这 个 大 型 图 标 库 。 








components/#glyphicons。 


| 关于 Glyphicons, 建议 大 家 先 看 看 Bootstrap 文档 : http://getbootstrap.com/ 
A 
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稍 后 你 会 看 到 可 用 的 图 标 , 以 及 在 HTML 中 使 用 span 标记 及 Glyphicon 类 的 约定 。 先 从 
Home 导航 项 开始 。 


(1) 要 给 Home 导航 项 添加 Glyphicon Home 图 标 ， 只 要 在 文本 之 前 添加 一 个 span 标签 ， 
再 加 上 特定 的 类 即 可 : 


«li class="active"> 
«a href="index.html"> 
<span class="glyphicon glyphicon-home"></span> Home 
</a> 





[ Q 注意 这 里 在 span 标签 和 Home 之 间 人 为 加 了 一 个 空格 。 


(2) 保存 并 刷新 浏览 器 。 一 切 顺利 的 话 ， 应 该 能 看 到 图 标 ! 











Portfolio 


(3) 如 果 你 没 看 到 图 标 ， 请 确保 : 

口 Glyphicon 字体 位 于 fonts 文件 夹 ; 

口 变量 文件 _variables.less 中 的 eicon-font-path 值 正确 ， 我 的 是 @icon-font-path: 
"a tonts/ Tag 


(4) 假设 一 切 顺 利 ， 我 们 接着 给 剩 下 的 导航 项 添加 图 标 。 以 下 依次 是 Portfolio, Team 和 
Contact 的 图 标 对 应 的 标签 : 


<span class="glyphicon glyphicon-picture"»«/span» 
<span class="glyphicon glyphicon-user"></span> 
<span class="glyphicon glyphicon-envelope"></span> 


(5) 保存 并 刷新 。 应 该 看 到 下 面 展示 的 效果 : 
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(6) 以 及 下 面 折 又 后 的 响应 式 效 果 : 
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2.11 


还 不 错 。 
当然 ， 这 里 的 


Bootstrap F fe 
从 Glyphicons 





Bootstrappin’ 


Ea Portfolio 


£ Team 











图 标 与 设计 方案 中 的 并 不 完全 一 致 。 设 计 方 案 中 的 是 这 样 的 : 





Portfolio Team Contact 


费 使 用 的 Glyphicons 不 包含 计算 机 显示 器 和 群 组 图 标 。 此 外 ， 我 们 也 没有 
图 标 中 找到 适合 页 脚 中 社交 媒体 链接 的 图 标 。 





好 在 ， 我 们 还 有 别 的 选择 。 下 面 就 来 看 一 看 。 


添加 Font Awesome 图 标 


在 本 书写 作 时 

















, Font Awesome 中 包含 361 个 图 标 ， 是 Glyphicons 的 Bootstrap 版 本 的 近 两 








fi, Font Awesome 图 标 是 免费 、 开 源 的 , 而 且 也 很 方便 在 Bootstrap 中 使 用 。Font Awesome 


的 主页 位 于 : 


http://fortawesome. github.io/Font-Awesome/ 


下 面 我 们 就 来 使 用 Font Awesome 图 标 。 


(1) 打开 Font Awesome 主页 ， 即 http://fortawesome.github.io/Font-Awesome/， 单 击 大 大 的 
Download 按钮 。 
(2) 解压 缩 下 载 到 的 文件 ， 可 以 看 到 以 下 文件 结构 : 





LH EL EL FJ 





LI font-awesome 
> css 
> jl font 
> (less 
> LJ scss 
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(3) 在 font 文件 夹 中 ， 可 以 看 到 Font Awesome 图 标 字体 文件 。 





LJ font-awesome 
> jl css 
v Ø font 
F fontawesome-webfont.eot 
=, fontawesome-webfont.svg 
fontawesome-webfont.ttf 
F fontawesome-webfont.woff 
FontAwesome.otf 








(4) 把 所 有 字体 文件 复制 粘贴 到 项 目的 fonts 文件 夹 中 ， 与 Glyphicons 字体 文件 在 一 块 。 
(5) 下 面 ， 我 们 要 复制 Font Awesome 的 less 文件 到 我 们 项 目的 less 文件 夹 。 在 项 目的 less X 
件 夹 中 创建 一 个 子 文件 夹 , 命名 为 font-awesome, 把 Font Awesome 的 less 文件 复制 过 来 。 


























(y less 
. main.less 
"^ navbar.less 
Ø variables.less 
> | bootstrap 
MEL font-awesome 
bordered-pulled.less 
core.less 
|; fixed-width.less 
font-awesome.less 











(6) 接 下 来 ,要 在 ”main.less 文件 中 导入 font-awesome.less 文件 ， 以 便 将 字体 规则 编译 到 
样式 表 中 。 我 们 就 在 导入 Glyphicon 字体 的 下 面 添加 import 语句 : 


QGimport "bootstrap/glyphicons.less"; 
Qimport "font-awesome/font-awesome.less"; 


(7) Font Awesome 的 less 文件 中 包含 一 个 变量 ， 指 定 了 Font Awesome 字体 的 路 径 。 我 们 
得 确保 该 路 径 与 项 目 文件 夹 结 构 一 致 。 打 开 Font Awesome 变量 文件 font-awesome/ 
variables.less， 确 保 afa-font-path 变量 的 值 是 . . /fonts; 如 下 所 示 : 








Gfa-font-path: "../fonts"; 


[ 这 里 的 路 径 是 相对 于 编译 得 到 的 CSS 文件 而 言 的 , 它 位 于 css 文件 夹 中 。 ] 


(8) 保存 并 编译 CSS。 
(9) 现在 ,在 index.html 中 ， 更 新 Team 导航 项 的 图 标 , 使 用 Font Awesome 名 为 fa-group 
的 图 标 ， 此 外 还 要 加 一 个 独立 的 fa 类 ， 最 后 再 加 上 我 们 自己 通用 的 icon 25: 
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2.12 


«span class-"icon fa fa-group"'»«/span» Team 
(10) 保存 index.html1， 然 后 刷新 浏览 器 。 
如 果 一 切 顺利 ， 应 该 看 如 下 结 




















如 果 你 看 到 的 是 一 个 奇怪 的 图 标 符号 ， 或 者 什么 也 没 看 到 ， 那 说 明 Web 
Cu, 字体 并 没有 应 用 。 这 时 候 ， 要 检查 一 下 图 标 类 是 否 正确 ( 包括 fa X), 
Q 确保 Font Awesome 字体 都 在 fonts 文件 夹 中 ， 而 且 font-awesome/ 
variables.less 中 的 路 径 也 没有 问题 。 





祝贺 你 一 一 你 有 了 双 倍 的 图 标 ! 

此 时 此 刻 ， 我 们 可 以 同时 使 用 Glyphicons， 也 可 以 完全 弃 用 它 。 为 了 减少 代码 见 余 ， 咱 
们 还 是 弃 用 它 ， 只 使 用 Font Awesome 字体 吧 。 为 此 只 需要 两 步 : 

(1) 把 _main.less 中 导入 Glyphicons 字体 的 代码 注释 掉 。 


// @import "bootstrap/glyphicons.less"; 
@import "font-awesome/font-awesome.less"; 


(2) 修改 index.html 中 图 标 标记 的 类 ， 改 为 Font Awesome 图 标 对 应 的 类 名 。 


查看 Font Awesome 图 标的 页 面 http://fortawesome.github.io/Font-Awesome/icons/， 可 以 看 
到 图 标 对 应 的 类 名 。 根 据 设计 方案 ,我 们 需要 以 下 图 标 : 

«span class-"icon fa fa-home"»«/span» Home 

«span class-"icon fa fa-desktop"»«/span» Portfolio 


«span class-"icon fa fa-group"'»«/span» Team 
<span class-"icon fa fa-envelope"»«/span» Contact 


结果 如 下 : 








加 Portfolio A Tean i£ Contact 








调整 导航 项 图 标 颜色 


发 现 没有 ? 图标 看 起 来 比 旁 边 文本 显得 粗大 一 些 。 虽 然 颜 色 一 样 ， 但 图 标 看 起 来 似乎 更 
抢眼 。 下 面 我 们 就 来 调整 图 标的 颜色 ， 让 它 更 浅 一 点 。 
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(1) 在 编辑 器 中 打开 _navbarless。 

(2) 搜索 到 选择 符 .navbar-default， 我 们 是 通过 这 个 类 为 导航 条 应 用 默认 样式 的 。 这 
个 选择 符 应 该 在 // Alternate navbars 

(3) 在 能 套 的 规则 中 ， 再 找到 选择 符 .navbar-nav 和 > 1i >， 我 们 就 在 这 里 调整 图 标的 
颜色 。 

(4) 在 定义 导航 项 默认 链接 颜色 的 声明 下 面 , 我 们 要 山 套 一 个 针对 图 标的 规则 ， 把 图 标 颜 
色 设置 得 更 浅 一 些 ， 因 此 要 用 到 变量 @gray-1light: 
.navbar-nav { 


> 11>a { 
color: Gnavbar-default-link-color; 

































































.icon ( // added rule set 
color: QGgray-light; 


通用 的 icon 类 为 我 们 选择 图 标 提供 了 方便 。 


ŞS 这 里 添加 的 的 单行 注释 // added rule set， 可 以 让 我 们 将 来 方便 地 
找到 自己 添加 的 规则 。 





(5) 此 外 ， 我 们 还 得 设 定 这些 岁 标 仍旧 共享 相同 的 悬 停 和 活动 颜色 : ebrand-primary。 
为 此 还 要 在 我 们 刚刚 添加 的 规则 下 方 ， 再 添加 icon 类 。 就 在 伪 选 择 符 & :hover 和 
&: focus 后 面 ， 再 添加 两 个 针对 图 标的 组 合 选择 符 :; 





























&:hover, 

&:focus, 

&:hover .icon, // added selector 

&:focus .icon ( // added selector 
color: Gnavbar-default-link-hover-color; 
background-color: Gnavbar-default-link-hover-bg; 


) 
再 像 下 面 的 代码 片段 一 样 ， 针 对 活动 链接 添加 针对 图 标的 选择 符 : 


> .active >a { 
&, 
&:hover, 
&:focus, 
.icon, // added selector 
&:hover .icon, // added selector 
&:focus .icon ( // added selector 
color: Gnavbar-default-link-active-color; 
background-color: Gnavbar-default-link-active-bg; 
H 
j 
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(6) 添加 完 这 些 选择 符 之 后 ， 保 存 文件 ,编译 CSS， 剧 新 浏览 器 。 你 应 该 看 到 图 标的 颜色 
比 默认 的 灰色 浅 了 一 些 ， 但 在 悬 停 和 活动 状态 下 ， 仍 然 与 链接 文本 的 颜色 相同 。 











W) 








导航 条 就 这 样 设 计 完 成 了 一 一 或 者 说 ， 基 本 完成 了 。 因 为 我 们 在 不 经 意 间 又 制造 了 一 个 
不 得 不 解决 的 小 麻烦 。 在 继续 之 前 ， 必 须 先 把 它 及 时 人 处理 掉 。 








2.13 ”调整 响应 式 导 航 条 断 点 


导航 条 在 添加 了 Logo 图 片 ， 增 大 了 导航 项 ,添加 了 图 标 之 后 ， 宽 度 也 相应 增加 了 。 那 么 
这 也 给 我 们 的 响应 式 设计 造成 了 一 个 问题 。 试 着 从 宽 到 窄 ( 大 约 480px ) 来 回 缩小 窗口 ， 
就 可 以 碰 到 导航 项 一 下 子 被 挤 到 Logo 下 方 的 情况 。 











怎么 回 事 ? 因为 在 视 口 介 于 768px 和 991px 之 间 时 ， 导 航 对 于 它 的 容器 来 说 太 宽 了 。 前 
面 两 个 数值 正 是 Bootstrap 变量 escreen-sm-min fllescreen-md-min 的 值 。 

我 们 知道 ， 变 量 egrig-float-breakpoint 决定 了 导航 条 在 视 口 多 宽 的 时 候 折 生起 来 。 
可 以 在 variables.less 文件 的 // Grid system 部 分 找到 这 个 变量 。 


// Point at which the navbar stops collapsing 
Ggrid-float-breakpoint: Gscreen-sm-min; 


我 们 需要 调整 这 个 断 点 ， 以 便 在 视 口 宽度 达到 下 一 个 更 宽 的 断 点 ( @screen-md-min ) 
前 ， 让 导航 条 仍旧 保持 折 侄 。 更 新 断 点 变量 后 的 结果 如 下 : 


Ggrid-float-breakpoint: Gscreen-md-min; // edited 
保存 ,编译 并 刷新 。 你 会 发 现 这 一 次 导航 条 在 到 达 下 一 个 断 点 之 间 ， 始 终 保 持 折 释 状态 。 
问题 解决 啦 ! 接 下 来 该 调整 传送 带 了 。 


























2.14 调整 传送 市 


关于 传送 带 ， 我 们 主要 还 是 使 用 Bootstrap 默认 的 样式 ， 同 时 对 几 个 比较 重要 的 地 方 进行 
定制 。 为 此 ， 我 们 复制 一 份 Bootstrap 的 carousel.less 文件 ， 然 后 再 进行 修改 。 
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(1) 复制 bootstrap/carouselless， 将 其 保存 到 less 文件 夹 并 命名 为 carousel.less. 





LJ less 
. main.less 
| _carousel.less 





_navbar.less 
 variables.less 


(2) 更 新 _main.less， 用 导入 这 个 文件 的 代码 代替 导入 Bootstrap 中 相应 文件 的 代码 : 


QGimport " carousel.less"; 


(3) 1E. carousel.less 一 开头 的 注释 改 成 如 下 所 示 : 


// 
// Customized Carousel 


下 面 就 可 以 开始 定制 了 ! 


2.14.1 把 控件 改 成 使 用 Font Awesome 图 标 


如 果 你 在 上 一 节 就 把 Glyphicons 字体 删除 了 ， 那 就 会 发 现 传送 带 左 右 两 侧 的 “上 一 个 ” 
和 “下 一 个 ”控件 不 见 了 。 因 为 这 两 个 图 标 就 来 自 Glyphicons。 我 们 可 以 让 Font Awesome 














图 标 取 而 代 之 。 
(1) 首先 , 更 新 index.html 中 的 图 标 标记 。 找到 带 有 carousel-control H left, right 
类 的 链接 : 


«a class="left carousel-control" ... 


(2) 将 span 标签 中 的 类 修改 为 通用 的 icon 类 ,再 加 上 Font Awesome KRÆ, 如 下 所 示 : 


<span class="icon fa fa-chevron-left"></span> 


<span class="icon fa fa-chevron-right"></span> 


(3) 接 下 来 ， 在 _carousel.less 中 添加 新 类 选择 符 。 先 找到 // Left/right controls for 
nav 注释 下 的 .carousel-control 选择 符 ,， 在 其 仍 套 规则 中 找到 注释 // Toggles, 
然后 添加 我 们 的 .icon 类 和 注释 : 


// Toggles 
.icon-prev, 
.icon-next, 
.glyphicon-chevron-left, 
.glyphicon-chevron-right, 
.Icon { // added 
position: absolute; 
top: 50$; 
z-index: 5; 
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display: inline-block; 
} 
.icon-prev, 
.glyphicon-chevron-left, 
&.left .icon ( // added 
left: 20%; // edited was 50% 


.icon-next, 
.glyphicon-chevron-right, 


&.right .icon ( // added 
right: 20%; // edited was 50% 


关于 以 上 修改 的 说 明 如 下 
; 通过 添加 基本 的 icon 类 , 我们 可 以 使 用 任意 图 标 , 样式 都 不 会 出 问题 


口 &.left fe&.right 的 写法 是 在 谈 套 层次 中 回溯 一 层 ， 编 译 之 后 asl 


下 面 ， 


zx .carousel-control.left fe.carousel-control.right; 


口 修改 left: 和 zight: 定 位 的 值 之 后 ,让 图 标 更 靠近 传送 带 两 侧 的 边界 。 








， 编 译 ， 刷 新 。 新 的 Font Awesome 图 标 应 该 粉墨登场 了 。 



































我 们 对 传送 带 进行 一 番 修 人 饰 。 
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2.14.2 添加 上 、 下 内 边 


先 给 .carousel 元 素 添 加 一 点 上 、 下 内 边 距 ， 并 将 背景 色 设置 为 lbgray-lighter。 为 
了 将 来 方便 查找 ,我 在 新 增 或 编辑 过 的 行 尾 都 会 加 上 注释 。( 当然 , 这 些 注释 不 会 编译 到 
最 终 的 CSS Hi.) 


.Carousel { 
position: relative; 
padding-top: 4px; // added 
padding-bottom: 28px; // added 
background-color: Ggray-lighter; // added 
} 


保存 并 编译 后 ， 透 过 新 添加 的 内 边 距 ， 可 以 看 到 传送 带 中 图 片上 、 下 方 的 亮 灰色 背景 。 
这 样 就 似乎 有 了 一 个 框 ， 将 图 片 与 其 上 、 下 的 元 素 隔 离开 来 。 此 外 ， 我 们 还 要 利用 多 出 
来 的 下 内 边 距 重新 定位 传送 带 指示 器 ， 让 它 更 显眼 一 些 。 

不 过 ， 我 们 得 先 让 图 片 在 所 有 情况 下 都 能 自动 拉 伸 填 充 所 有 空间 。 






































Hm 











2.14.3 ”强制 图 片 全 宽 


无 论 屏幕 多 宽 ， 我们 都 想 让 图 片 始终 保持 与 屏幕 同 宽 。 因 为 传送 带 中 的 图 片 宽度 为 
1600px， 基 本 可 以 涵盖 大 多 数 屏 幕 。 如 果 屏 幕 宽 | 度 超过 1600px, 那 右 侧 就 会 出 现 间 院 。 




















EC ey 
COMMUNITY [IM 








强制 让 图 片 在 1600px 以 上 的 屏幕 中 也 保持 全 宽 ， 可 能 导致 轻微 的 像素 失真 ; 但 如 果 图 片 
足够 大 ， 变 形 也 不 致 于 太 明 显 。 





如 果 时 间 人 允许， 我们 可 以 采用 响应 式 图 片 方案 ， 即 在 小 屏幕 上 加 载 小 图 
片 ， 给 大 屏幕 使 用 大 图 片 。 附 录 B 给 出 了 响应 式 图 片 的 解决 方案 ， 大 家 
可 以 参考 。 
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现在 ,我 们 只 要 在 文件 中 新 增 两 行 代码 即 可 。.carousel 选择 符 下 方 ， 就 是 我 们 要 添加 
声明 的 骨 套 规则 。 在 .carousel-inner 选择 符 下 面 ， 是 针对 传送 带 图 片 的 规则 ， 有 一 
个 混入 用 于 确保 图 片 响应 ， 能 够 适应 小 屏幕 。 在 此 ， 我 们 也 可 以 强制 图 片 适应 大 屏幕 ， 


即 设 定 一 个 min-width:: 








.carousel-inner ( 
» .item ( 


» img, 

» a » img ( 
.img-responsive(); 
line-height: 1; 
min-width: 100%; // added 

} 

} 


作出 这 个 调整 后 ， 无 论 把 浏览 器 窗口 拉 得 多 宽 ， 图 片 都 会 跟着 变 宽 。 
接 下 来 ， 需 要 限定 传送 带 的 最 大 高 





B 


2.14.4 ”约束 传送 带 的 高 度 
我 们 发 现 ， 在 中 大 型 屏幕 中 ， 传 送 带 变 得 太 高 了 。 根 据 设 计 方案 ， 传 送 带 的 高 度 应 该 大 
致 在 440px。 简 单 ， 我 们 只 要 在 图 片 的 父 元 素 .carousel-inner > .item 上 添加 这 个 
限制 即 可 : 
.carousel-inner { 
m { 
Six OE ONES 640px; // added 
因为 .carousel-inner 元 素 有 一 条 规则 是 overflow: hidden, Mi .item 元 素 又 被 限 
定 了 高 度 ， 所 以 在 图 片 高 度 超过 最 高 限制 后 ， 其 下 面 的 部 分 会 被 隐藏 起 来 。 
在 这 一 步 的 基础 上 ， 我 们 可 以 继续 使 用 衣 套 媒体 查询 (LESS 的 另 一 个 方便 特性 )， 再 利 
用 Bootstrap 的 中 、 大 断 点 变量 ， 分 别 调整 一 下 屏幕 宽度 过 宽 时 图 片 的 垂直 定位 ， 从 而 保 
证 我 们 的 作品 处 于 焦点 位 置 。 为 此 要 用 到 以 下 代码 : 


> img, 
> a» img { 









































Gmedia (min-width: Gscreen-md-min) ( 
margin-top: -40px; 
} 


Gmedia (min-width: @screen-lg-min) ( 
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margin-top: -60px; 
} 
} 


保存 、 编 译 并 刷新 。 你 会 发 现 这 时 候 的 传送 带 已 经 基本 成 形 ， 无 论 宽屏 i 
模 有 样 了 。 
FARIT, XFER: 

















Emancipation stories 


wa 2 入 o 
[^N tmancipation stories 
EM F 


c eR 





PE, ARERR AE T o 





2.14.5 EEIT 
传送 带 指示 器 的 作用 是 向 用 户 显示 一 共有 几 张 幻灯 片 ， 当 前 幻灯 片 是 第 几 张 。 现 在 ， 指 
示 带 很 难 被 看 清楚 ， 仔 细 看 才 会 发 现 它 位 于 作品 图 片 底部 中 间 。 
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F 面 我 们 把 指示 器 放 到 它 应 该 在 的 位 置 上 : 图 片 下 方 。 

(1) 在 _carousel.less F, 搜索 到 选择 符 .carousel-indicators, 位 于 文件 大 约 三 分 之 二 
的 位 置 ， 该 位 置 有 如 下 注释 : 
// Optional indicator pips 
看 看 这 个 元 素 垂 直方 向 的 定位 距离 : 


.carousel-indicators ( 
position: absolute; 
bottom: 10px; 


D RNIF ENIES LPRA, HEAR TE STIL ALB ros HH PIERII TS EC o 
调整 底部 定位 的 值 可 以 做 到 。 此 外 ， 还 需要 同时 把 下 外 边 距 重 置 为 0。 
.carousel-indicators ( 

position: absolute; 
bottom: 0; // edited 
margin-bottom: 0; // added 

(3) 保存 、 编 译 ， 然 后 试 一 试 。 或 许 你 也 发 现 了 ,在 小 屏幕 上 ， 指 示 器 的 位 置 是 我 们 想 要 
的 。 而 在 大 屏幕 上 ， 指 示 器 仍然 还 在 它 原 来 的 位 置 上 。 为 什么 ” 原来 在 适用 的 某 个 媒 
体 查 询 里 还 有 一 条 规则 管 着 它 呢 ， 这 个 媒体 查询 就 在 文件 最 末尾 。 

(4) 找到 文件 未 尾 的 代码 ， 在 针对 平板 及 以 上 屏幕 的 代码 处 : 


// Move up the indicators 
.carousel-indicators ( 
bottom: 20px; 
} 


这 是 把 指示 带 向 上 调 的 , 现在 我 们 用 不 着 了 。 只 要 把 它 注释 掉 , 就 不 会 被 编译 到 CSS 
中 


// .carousel-indicators { 
// bottom: 20px; 
// ) 


这 样 就 可 以 达到 我 们 目的 。 现 在 ， 指 示 器 在 各 种 屏幕 上 的 位 置 都 始终 如 一 了 。 


— r— 


接 下 来 ,我们 调整 指示 器 的 外 观 ， 让 它们 更 大 ， 更 显眼 一 些 。 
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2.14.6 ”调整 指示 器 外 观 


我 们 要 使 用 灰色 相关 的 变量 ， 把 传送 带 指示 器 调整 得 更 显眼 一 些 。 除 了 调整 颜色 ， 也 要 

把 它们 弄 大 一 点 。 就 从 _variables.less 文件 开始 吧 。 

(1) 在 _variables.less 中 ， 位 于 @carousel-control 相关 变量 后 面 ， 可 以 看 到 两 个 以 
Gcarousel-indicator 开头 的 变量 : 这 两 个 颜色 用 于 默认 状态 下 指示 器 的 边框 , 还 
有 活动 状态 下 指示 器 的 填充 。 


Gcarousel-indicator-active-bg: #fff; 
@carousel-indicator-border-color: #fff; 


(2) 我 们 在 这 里 添加 一 个 默认 的 背景 颜色 ， 并 使 用 egray-Iight 作为 默认 状态 下 指示 器 
的 填充 色 : 















































@carousel-indicator-bg: @gray-light; 
(3) 然后 ， 修 改 活动 状态 下 的 背景 色 : 
@carousel-indicator-active-bg: @gray-lightest; 


(4) 最 后 ， 把 border-color 设置 为 透明 : 


@carousel-indicator-border-color: transparent; 


(5) 保存 、 编 译 并 刷新 。 
































至 此 ， 除 了 证 活动 状态 下 的 指示 器 不 可 见 ， 其 他 样式 都 就 绪 了 。 
下 面 ， 再 打开 _carouselless。 
(1) 在 _carousel.less 中 ， 找 到 .carousel-indicators 下 面 的 第 一 组 规则 : 


.carousel-indicators ( 
position: absolute; 


(2) RARER HHY 1i 选择 符 。 在 这 里 需要 修改 儿 个 值 : 


O {E width 和 height 增 大 到 16px; 

O 删除 外 边 距 ; 

口 添加 background-color 声明 ， 值 设置 为 新 变量 @carousel-indicator-bg; 
O 删除 边框 线 〈 前 面 把 边框 变量 设置 为 透明 ， 就 是 为 了 这 里 安全 ); 

口 为 所 有 修改 和 新 增添 加 注释 ， 如 下 所 示 。 
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li ( 
display: inline-block; 
width:  18px; // edited 
height: 18px; // edited 
// margin: 1px; // edited 
text-indent: -999px; 
background-color: Gcarousel-indicator-bg; // added 
// border: 1px solid Gcarousel-indicator-border-color; 
border-radius: 10px; 


G) 注意 下 面 这 两 个 针对 IE8-9 的 手法 ， 它 们 在 这 et | 
因为 我 们 已 经 给 所 有 指示 器 都 提供 了 背景 色 ， 所 以 这 几 行 代码 就 没有 必要 了 。 把 它们 
都 注释 掉 吧 ， 和 否则 E uo EE. 
// background-color: #000 X9; // IE8 
// background-color: rgba(0,0,0,0); // IE9 
(4) 接 下 来 ， 再 注释 掉 .active 选择 符 下 面 的 margin、width 和 height， 因 为 我 们 不 
希望 活动 状态 下 的 指示 带 变 大 ( 当然 也 不 希望 它们 缩小 到 12px )。 


.active { 
// margin: 0; // edited 
// width: 12px; // edited 
// height: 12px; // edited 
background-color: Gcarousel-indicator-active-bg; 


j 
(5) 最 后 ， 与 .active 选择 符 并 列 添加 一 个 :hover 选择 符 ， 增 加 悬 停 效 果 : 


li:hover, // added 
.active { 。 


(6) 保存 ， 编 译 并 刷新 。 看 看 结果 吧 ! 
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传送 带 的 调整 工作 做 完 啦 ! 一 路 下 来 ， 我 们 也 学 到 不 少 东 西 : 很 多 Bootstrap 的 约定 ， 还 
有 一 些 LESS 的 。 


从 下 一 方 开始 ， 事 情 就 越 来 越 简单 了 。 





2.45 调整 分 栏 及 其 内 容 


下 面 我 们 来 调整 一 下 位 于 标题 Welcome! , Recent Updates 和 Our Team 下 面 的 三 个 内 容 块 。 
首先 ， 为 每 个 块 中 的 按钮 添加 圆圈 箭头 图 标 。 还 记得 我 们 可 以 使 用 Font Awesome IE, 


(1) 查看 Font Awesome 文档 : http://fortawesome.github.io/Font-Awesome/icons/ ; 
(2) 可 以 看 到 我 们 想 使 用 的 图 标 : 


© fa-arrow-circle-right | 


(3) 在 index.html 中 ， 为 每 个 链接 添加 带 有 适当 类 的 span 标签 。 下 面 是 为 第 一 个 链接 添 
加 代码 后 的 结果 ， 为 清晰 起 见 ， 加 了 回 车 换行 。 


«p» 
«a class-"btn btn-primary pull-right" href="#"> 
See our portfolio «span class-"icon fa fa-arrow-circle-right"»«/span» 
</a> 
</p> 


(4) 每 个 链接 都 如 此 。 
这 样 ， 每 个 按钮 上 就 都 有 了 相同 的 图 标 了 。 














Welcome! Recent Our Team 
Suspendisse et arcu felis, ac Updates Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse gravida turpis. Suspendisse 


Suspendisse et arcu felis, ac potenti. Ut porta rhoncus ligula, 


sed fringilla felis feugiat eget. In 
non purus quis elit iaculis 
tincidunt. Donec at ultrices est 


potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In 
non purus quis elit iaculis 
tincidunt. Donec at ultrices est 


gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In 
non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 








再 给 文本 块 与 传送 带 之 间 增 加 一 些 垂直 内 边 距 ， 现 在 太 紧 了 。 
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Recent 
Updates 











当前 的 问题 是 ， 相 关 的 样式 放 在 哪里 最 合适 ? 为 页 面 中 的 内 容 添 加 额外 的 内 边 距 在 目前 

和 以 后 都 是 经 常 可 能 发 生 的 ,所 以 我 们 最 好 创建 一 个 LESS 文件 , 用 以 保存 这 些 及 其 他 政 Ea 
动 。( 巧 的 是 ， 我 们 也 正 需 要 一 个 这 样 的 文件 ， 用 以 添加 额外 的 、 更 重要 的 响应 式 调整， 

所 以 看 来 真有 必要 创建 一 个 新 文件 了 。 ) 

(1) 创建 一 个 新 文件 ， 命 名 为 page-contents.less。 

O) 把 它 保存 到 less 文件 夹 中 ， 与 其 他 自 定义 LESS 文件 放 在 一 起 。 

















E less 

| . main.less 

= .carousel.less 

"| .navbar.less 

È _page-contents.less 
= _variables.less 

> Ø bootstrap 

> $ css 


> Nl font-awesome 



















(3) 在 文件 中 添加 以 下 注释 : 


// 
// Page Contents 
(a EE 


(4) 然后 ， 写 一 个 让 人 一 目 了 然 的 类 名 ， 再 加 上 适当 的 内 边 距 一 一 包括 下 内 边 距 : 


.page-contents { 
padding-top: 20px; 
padding-bottom: 40px; 

} 


(5) 保存 文件 。 
(6) 把 page-contents.less 导入 到 ”main.less 中 。 在 这 里 , 我 把 导入 代码 放 到 文件 最 下 面 // 
Utility classes 注释 的 上 面 ， 同 时 也 加 上 注释 : 


// Other custom files 
Gimport " page-contents.less"; 


(7) 保存 并 编译 。 
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(8) 下 面 再 在 标记 中 添加 必要 的 类 。 打 开 index.html， 给 带 有 container 类 的 aiv 元 素 
添加 page-contents 类 ， 就 在 homepage- feature 传送 带 的 结束 标签 处 : 


«/div»«!-- /#homepage-feature.carousel --» 
«div class-"page-contents container"» 
«div class="row"> 


(9) 保存 并 刷新 浏览 器 ， 应 该 看 到 内 边 距 已 经 加 上 了 。 


接 下 来 ,我们 再 对 罕 屏 幕 下 这 些 块 的 效果 进行 调整 。 如 下 图 所 示 ， 在 一 栏 布局 时 ， 标 题 
并 没有 清除 相 邻 的 按钮 。 








Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 
In non purus quis elit iaculis tincidunt. Donec at ultrices est. 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 
In non purus quis elit iaculis tincidunt. Donec at ultrices est. 


Our Team 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 
In non purus quis elit iaculis tincidunt. Donec at ultrices est. 








这 个 问题 有 点 棘手 。 我 们 本 想 给 每 个 包含 块 div 添加 一 个 clearfix 类 ， 但 不 行 ， 因 为 
在 视 口 在 768px 及 以 上 宽度 时 ， 需 要 让 这 些 块 都 浮动 起 来 ， 谁 也 不 能 清除 谁 。 

这 时 候 就 要 用 到 媒体 查询 了 。 因 为 三 栏 布局 是 从 @screen-sm WA, tbi 768px 开始 
的 。 那 我 们 可 以 用 媒体 查询 来 设置 在 视 口 比 这 个 断 点 小 1 像素 时 ， 就 给 文本 块 应 用 清除 
规则 。 而 比 ascreen-sm 小 1 像素 的 正 是 特殊 断 点 escreen-xs-max。 在 _variables.less 
中 其 他 escreen 变量 下 面 ， 可 以 看 到 它 : 


// So media queries don't overlap when required, provide a maximum 






































Gscreen-xs-max: (Gscreen-sm - 1); 
Gscreen-sm-max: (Gscreen-md - 1); 
Gscreen-md-max: (Gscreen-lg - 1); 


这 里 的 escreen-xs-max 断 点 正 是 我 们 需要 的 ， 因 为 它 的 值 恰好 比 aescreen-sm 断 点 小 
1 像素 。 
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不 能 在 这 里 使 用 ascreen-sm-min 变量 , 因为 多 出 这 1 像素 , 会 导致 三 

栏 分 别 都 是 近似 三 分 之 一 容器 的 宽度 ， 而 三 栏 加 到 一 起 又 太 宽 ， 不 能 并 

A. 排 浮动 , 只 能 重 直 堆 县 ,经 过 测 试 , 多 出 这 ] 像素 会 在 视 口 宽度 为 768px 
时 导致 布局 失控 。 因 此 ， 一 定 要 使 用 ascreen-xs-max X €! 


除 此 之 外 ,最 好 再 给 这 儿 栏 添加 一 些 下 内 边 CEREAN, HEZA AER 


在 我 们 的 媒体 查询 中 , 将 使 用 CSS 2 的 属性 选择 符 来 选择 类 中 包含 col- 的 所 有 元 素 ， 从 
而 让 同一 组 规则 能 够 应 用 给 任何 尺寸 的 分 栏 : 


.page-contents { 











Gmedia (max-width: @screen-xs-max) ( 
[class*z"col-"] ( 
clear: both; 
padding-bottom: 40px; 
} 
} 
} 


保存 、 编 译 并 刷新 。 结 果 大 大 不 同 ! 








I 
i 


Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 
In non purus quis elit iaculis tincidunt. Donec at ultrices est. 


See our portfolio © 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 
In non purus quis elit iaculis tincidunt. Donec at ultrices est. 


See what's new! © 


Our Team 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 
In non purus quis elit iaculis tincidunt. Donec at ultrices est. 


Meet the team! © 














效果 好 看 多 了 ! 
下 面 该 来 修饰 页 脚 了 。 
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2.16 ”修饰 页 脚 


页 脚 最 主要 的 功能 就 是 罗列 社交 图 标 。 就 用 Font Awesome! 
查询 Font Awesome 文档 ， 可 以 在 Brand Icons 部 分 找到 我 们 想到 的 图 标 : 


http://fortawesome.github.io/Font-Awesome/icons/#brand 








那么 ， 只 要 把 页 脚 中 的 社交 链接 蔡 换 成 带 有 相应 类 的 span 元 素 即 可 。 
«ul class="social"> 
«li»«a href="#" title="Twitter Profile"»«span class="icon fa 
fa-twitter"></span></a></1i> 
«li»«a href="#" title-"Facebook Page"»«span class-"icon fa 
Fa-facebook"»«/span»«/a»«/li» 
«li»«a href="#" title-"LinkedIn Profile"»«span class-"icon fa 
Fa-linkedin"»«/span»«/a»«/li» 
<li><a href="#" title-"Google-« Profile"»«span class-"icon fa 
Fa-google-plus"»«/span»«/a»«/li» 
«li»«a href="#" title-"GitHub Profile"»«span class-"icon fa 
Fa-github-alt"»«/span»«/a»«/li» 





«/ul» 


替换 之 后 的 标记 让 原来 的 社交 链接 变 成 了 图 标 链接 : 











Bootstrappin 








为 了 让 这 些 图 标 水 平 排列 并 居中 ， 执 行 下 列 操 作 。 


(1) 创建 一 个 新 文件 footer.less 来 保存 相关 样式 。 
(2) 把 这 个 文件 保存 到 less 文件 夹 中 : 








LJ less 
. main.less 
.carousel.less 

| _footer.less 
.navbar.less 
-page-contents.less 
.variables.less 

> |] bootstrap 

> [jj font-awesome 











(3) 在 _main.less 中 添加 导入 这 个 文件 的 代码 : 
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// Other custom files 
Gimport " page-contents.less"; 
QGimport " footer.less"; 


接 下 来 就 可 以 写 样式 了 。 我 们 先 把 样式 摆 出 来 ， 然 后 再 解释 。 
调整 页 脚 的 样式 如 下 : 


ul.social { 
margin: 0; 
padding: 0; 
width: 100$; 
text-align: center; 
pA ba E $ 
display: inline-block; 
»atí 
display: inline-block; 
font-size: 18px; 
line-height: 30px; 
. square (30px); // see bootstrap/mixins.less 
border-radius: 36px; 
background-color: Ggray-light; 
color: #fff; 
margin: 0 3px 3px O0; 
&:hover ( 
text-decoration: none; 
background-color: Glink-hover-color; 


) 








} 
} 
下 面 来 逐 行 解释 。 
O 去 掉 ul 中 默认 的 内 、 外 边 距 ; 
O 将 容器 宽度 拉 伸 到 百分之百 ; 
口 内 容 居中 ; 
口 列表 项 显示 为 行内 块 ， 因 此 可 以 像 文 本 一 样 居中 ; 
口 链接 也 显示 为 行内 块 ， 从 而 可 以 填 满 有 效 空间 ; 
口 增 大 字号 和 行 高 ; 
O 使 用 Boostrap 的 混入 ， 将 宽度 和 高 度 设计 为 30px 见方 ; 
OQ 要 查看 这 个 混入 ， 打 开 bootstrap/mixins.less， 搜 到 . square， 可 以 看 到 下 列 代码 : 


// Sizing shortcuts 

.Size(Gwidth; Gheight) { 
width: QGwidth; 
height: QGheight; 

} 

. square (@size) ( 
.size(@size; @size); 














} 
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O border-radius 属性 的 值 设 置 得 足够 大 ， 以 便 图 标 及 其 背景 呈现 圆 形 ; 
口 设置 背景 色 、 前 景色 和 外 边 距 ; 
口 去 掉 悬 停 状 态 默认 出 来 的 下 划 线 ， 同 时 把 背景 色 改 为 浅 灰色 。 


设置 以 上 样式 后 , 我们 再 给 页 脚 添加 一 些 上 、 下 内 边 距 ,然后 将 内 容 居 中 ， 以便 Logo 居 
中 显示 在 社交 图 标 上 面 。 


footer[role="contentinfo"] { 
padding-top: 24px; 
padding-bottom: 36px; 
text-align: center; 


) 
结果 如 下 所 示 : 



































Welcome! Recent Updates Our Team 








挺 好 一 一 但 愿 跟 你 看 到 的 一 样 ! 


2.17 jd SKI ZA 


在 实际 做 一 个 类 似 的 项 目 之 前 ， 我 强烈 建议 大 家 至 少 再 做 一 件 事 。 那 就 是 花 点 时 间 优 化 

你 的 图 片 、CSS 和 JavaScript。 这 些 优 化 并 不 难 。 

口 压缩 图 片花 不 了 多 少时 间 ， 但 却 能 解决 导致 图 片 腾 肿 的 最 大 问题 。 本 章 中 的 图 片 都 在 

Photoshop 中 使 用 了 “保存 为 Web 格式 ”， 但 或 许 你 还 是 能 够 再 把 它们 压缩 一 些 

口 此 外 ， 应 该 马上 从 _main.less 中 删除 那些 不 需要 的 Bootstrap 的 LESS 文件 ， 然 后 最 小 

化 main.css。 

口 最 后 ， 还 要 对 plugins.js 进行 “瘦身 ”， 把 Bootstrap 原来 大 而 全 的 bootstrap.min.js 替换 
成 只 包含 我 们 用 到 的 carousel.js, collapse.js 和 transitions.js 的 压缩 版 。 然 后 再 压缩 最 终 
的 plugins.js 文件 。 


做 完 以 上 三 项 优化 ， 整 个 网 站 的 体 量 大 致 将 缩小 一 半 。 在 速度 就 是 生命 的 年 代 ， 既 要 考 
虑 用户 体验 , 又 得 考虑 SEO 排名 , 这 么 大 幅度 的 优化 可 不 得 了 。 为 了 帮助 大 家 完成 优化 ， 
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附录 A 提供 了 针对 这 个 项 目的 优化 步骤 。 
此 外 ， 还 有 两 个 非常 重要 的 可 能 性 ， 或 许 你 也 应 该 考虑 。 

第 一 ， 我 们 可 以 通过 实现 响应 式 图 片 来 进一步 优化 传送 带 图 片 。 那 些 图 片 太 大 了 ， 特 别 

是 对 小 屏幕 而 言 ， 实 在 没有 必要 那么 大 。 相 反 ， 如 果 是 像 视网膜 屏 这 样 的 高 密度 屏 ， 为 

保证 显示 效果 清晰 锐利 , 我 们 也 应 该 提供 高 分 辨 率 的 图 片 。 在 附录 B 中 , 我们 会 实现 Scott 

Jehl 邻 人 叫绝 的 Picturefil 方案 。 

第 二 , 我 们 知道 ， 触 摸 屏 设备 的 用 户 喜欢 用 手指 来 回 扫 屏 切换 传送 带 图 片 。 在 附录 C 中 ， ERI 
我 会 向 大 家 展示 如 何 利用 出 色 的 Hammerjs 插件 ， 只 几 步 就 为 传送 带 添加 扫 屏 交互 支持 。 

不 过 现在 ， 我 们 可 以 先 停 一 下 ， 庆 祝 一 番 。 





















































2.18 小 结 


下 面 我 们 来 清点 一 下 本 章 的 知识 要 点 。 

a 我 们 以 HTMLS Boilerplate 可 靠 的 HTML 标记 结构 作为 起 点 ; 

口 我 们 利用 了 Bootstrap 的 响应 式 导航 条 、 传 送 带 和 网 格 系统 ; 

a 我 们 自 定 义 了 一 些 Bootstrap 的 LESS 文件 ; 

O 我 们 还 创建 了 自己 的 LESS 文件 ， 并 将 它们 无 颖 集成 到 了 项 目 中 ; 

口 我 们 加 入 Font Awesome， 获 得 了 双 倍 的 图 标 ; 

口 我 们 实现 了 一 个 未 来 容易 维护 的 网 站 ， 因 为 网 站 的 文件 组 织 非 常 稳健 ， 注 释 非 常 完 
善 一 一 而 且 不 会 造成 代码 腕 肿 。 

有 了 这 些 经 验 ， 你 就 真 的 可 以 让 Bootstrap 为 你 所 用 了 : 利用 它 可 以 迅速 搭建 网 站 框架 ， 

然后 再 对 核心 内 容 进行 定制 。 在 本 书后 面 几 章 里 ， 我 们 还 将 继续 丰富 你 的 经 验 。 接 下 来 ， 

我 们 先 考 虑 把 本 章 的 设计 方案 转换 成 一 个 WordPress 主题 。 
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WordPress 主题 


这 一 章 ， 我 们 来 把 第 2 章 的 个 人 作品 站 点 变 成 一 个 WordPress 主题 。 基 于 Bootstrap 的 主 
题 其 实 很 多 。 而 我 们 一 直 关 注 把 Bootstrap 强大 的 LESS 样式 和 JavaScript 插件 ， 以 及 
HTMLS Boilerplate 中 的 最 佳 实践 结合 在 一 起 。 因 此 选择 一 款 符合 上 述 要 求 的 主题 对 我 们 
是 有 利 的 。 

Roots 主题 就 是 理想 的 选择 ， 它 从 一 开始 就 将 自己 定位 为 Bootstrap 驱动 的 、 各 方面 都 力 
求 体现 最 佳 实践 (包括 HTMLS Boilerplate 及 其 他 好 的 做 法 ) 的 一 个 基础 主题 。 因 此 本 章 
就 使 用 这 个 主题 作为 起 点 。 

本 章 内 容 : 

O 在 Roots 主题 中 集成 我 们 自 定义 的 LESS 和 JavaScript 文件 ; 

a 自 定义 主题 模板 文件 ， 以 提供 我 们 主页 传送 带 和 分 栏 内 容 所 需 的 标记 ; 

口 利用 强大 先进 的 自 定义 栏目 ， 为 传送 带 项 和 主页 分 栏 提供 自 定义 栏目 ; 

a 创建 主页 模板 文件 ， 将 自 定义 栏目 发 布 为 期 待 的 主页 布局 。 






































下 载 并 重 命名 Roots 主题 


我 们 先 下 载 Roots 主题 ”。 

(1) 打开 Roots 主题 的 主页 : http://roots.io/。 
建议 大 家 花 点 时 间 在 上 面 逛 一 逛 ， 熟 悉 一 下 这 个 资源 。( 这 是 一 个 不 错 的 生机 勃勃 的 
社区 。) 

(2) 点 击 GitHub 的 图 标 链接 ， 进 入 该 项 目的 GitHub 页 面 。 直 接 访 问 : https://github.com/ 
roots/roots o 



























































Qz 作为 练习 ， 大 家 可 以 直接 使 用 源 代码 中 提供 的 主题 文件 。 如 果 使 用 下 载 到 的 Roots 主题 ， 则 根据 官方 文档 












































( https://roots.io/sage/docs/theme-installation/ )， 在 不 使 用 Bedrock 的 情况 下 ， 需 要 在 wp-config.php 文件 中 添加 一 行 
代码 : adefine('WP ENV', 'development');. 














译 者 注 
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roots / roots @; Unwatch ~ 


Roots is a WordPress starter theme based on HTML5 Boilerplate & Bootstrap. http //roots.io 











——————————ó o o S 
uu pt h: master ~ roots /(* 

(3) 下 载 ZIP 文件。 

(4) 解压 缩 。 





> [9 roots-master 
F roots-master.zip 


(5) 如 下 图 所 示 ， 把 解压 得 到 的 文件 夹 重 命名 为 你 想 叫 的 主题 名 : 


> 0 bootstrappin-theme 
* roots-master.zip 


(6) 找到 主 文件 夹 中 的 style css 文件 ， 然 后 在 编辑 器 中 打开 它 ， 




































LJ bootstrappin-theme 
I 404.php 
> Ø assets 
i base.php 
CHANGELOG.md 
CONTRIBUTING.md 
functions.php 
Gruntfile.js 
index.php 
> (à lang 
> (ib 
= LICENSE.md 
] package.json 
= page.php 
ii README.md 
» Sscreenshot.png 
$ single.php 


Iu |I. E | I. |e 





ï template-custom.php 
L3 templates 





(7) 打开 这 个 文件 后 , 你 会 发 现 里 面 其 实 没有 样式 。 站 点 的 样式 来 自 assets 文件 夹 中 的 ess 
文件 夹 ,是 由 Bootstrap 编译 生成 的 。 我们 继续 沿用 Bootstrap 的 这 种 模式 。 而 style.css 
在 这 里 主要 用 于 命名 主题 、 列 出 贡献 者 名 单 、 声 明 许 可 。 


nnnnnmnmmnmnnnmnnmmnmrnnmrnmrmnrmr http: //blog.si na. comcrn/ uy 3283485963 





66 第 3 章 WordPre 


SS 主题 





(8) 按照 下 面 的 样板 修改 主题 名 称 : 


/* 

Theme Name: 
Theme URI: 
Description: 


Version: 
Author: 
Author URI: 


License: 
License URI: 
F 


(9) 保存 这 个 文件 。 





Bootstrappin' Theme 

your site URI] 

A custom theme based on «a href-z"http://www. 
roots.io"»the Roots Theme</a> 

1.0 

你 的 名 字 ] 

你 的 URL] 


你 的 许可 ] 
许可 URI] 











(10) 接 下 来 添加 一 个 自 定义 的 屏幕 截图 ， 以 便 在 WordPress 的 控制 板 中 更 容易 找到 它 。 
(11) 截取 第 2 章 示 例 站 点 的 一 张 截 图 。( 03_Code_BEGIN 的 练习 文件 夹 里 有 一 张 了 。) 
(12) 把 Roots 默认 的 屏幕 截图 替换 成 自 定 义 的 屏幕 截图 。 


好 了 ， 现 在 可 以 安装 Roots 主题 了 。 


3.2 ”安装 主题 








前 面 的 修改 暂时 切断 了 与 Bootstrap 样式 、 脚 本 等 的 联系 。 接 下 来 几 步 要 恢复 这 些 联 系 。 





为 了 让 整个 过 程 更 真实 有 趣 ， 我 们 可 以 先 把 主题 安装 上 ， 和 运行 起 来 。 这 样 就 可 以 随时 测 


试 了 。 
(1) 把 新 主题 上 传 到 




















WordPress" Il] themes 文件 夹 。( 如 果 是 在 本 地 ， 复 制 过 去 就 行 了 。 ) 











eoo C] wp-content 
Name 

i! index.php 

> LJ plugins 

(I themes 

> ff bootstrappin-theme 
i index.php 

> [9 twentyeleven 

> |j] twentythirteen 

> |j twentytwelve 

> [LN upgrade 






















(2) 在 WordPress 的 控制 板 中 ， 找 到 “外 观 | 主题 ”， 然 后 局 用 这 个 主题 。 如 果 你 按照 前 面 














CD 这 里 使 用 WordPress 4.0.1 Hl 














对 这 个 主题 进行 了 重 命名 ， 也 换 了 屏幕 截图 ,那么 结果 应 该 如 下 所 示 : 


P 文 版 截图 。 一 一 译 者 注 
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Bootstrappin' Theme 实时 预览 

















G) 点击 “启用 ”， 会 打开 启用 主题 页 面 ， 页 面 中 会 展示 如 下 选项 ， 相 应 的 选择 如 下 : 
口 是 否 建 立 静态 首页 ? 


[=l 
^E 


我 们 要 将 它 作为 站 点 主页 。 
口 是 否 修改 固定 网 址 结构 ? 
是 


这 个 选项 是 我 们 最 开始 都 会 设置 的 ， 这 样 页 面 的 URL 才 会 显示 文章 和 页 面 的 名 称 。 


gs ź 安装 的 MAMP 中 ， 我 发 现 只 有 更 新 了 固定 链接 结构 ，Roots 
PUR LR 


口 是 否 修改 上 传 文件 夹 ? 
否 
你 可 以 选择 将 上 传 文件 保存 到 另 一 个 文件 夹 ， 也 可 以 不 改 ， 使 用 默认 文件 夹 。 


口 是 否 建立 导航 菜单 ? 

















4E 
这 里 设置 的 是 顶部 导航 。 
口 是 否 添加 页 面 到 菜单 ? ? 


^E 
当然 啦 ， 谢 谢 ! 
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启用 主题 Bootstrappin' Theme 


是 否 建立 静态 首页 ? Be 
建立 一 个 名 为 Home 的 页 面 并 设置 为 静态 首页 


是 否 修改 固定 网 址 结构 ? EU 
修改 固定 网 址 结构 为 /%postname%/ 














是 否 修改 上 传 文件 夹 ? FY 
Change uploads folder to /media/ instead of /wp-content/uploads/ 
是 否 建立 导航 菜单 "E 


建立 主要 号 航 菜单 并 且 设 定位 置 


是 否 添加 页 面 到 菜单 是 " 
添加 所 有 已 发 表 的 页 面 到 主要 导航 











如 果 你 看 到 提示 说 要 确保 .htaccess 文件 可 写 ， 可 以 在 WordPress 站 点 
的 根 目录 (不 是 themes 文件 夹 ， 而 是 包含 wp-content、wp-admint 文 
件 夹 的 根 目 录 ) 创建 一 个 .htaccess 文件 ， 并 把 权限 设 定 为 664。 


(4) 保存 更 改 。 
(5) 然后 又 会 回 到 “外 观 | 主题 ”管理 页 面 。 





主题 @ s 


Bootstrappin 





Twenty Fourteen 


AM: Bootstrappin' Theme 
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(6) 单 击 “ 自 定义 ”按钮 。 

(7) 然后 ， 会 打开 一 个 可 以 设置 该 主题 的 页 面 。 
口 站 点 标题 和 副标题 : 修改 副标题 

口 导航 菜单 : 按 需 更 改 

口 静态 首页 : 按 需 更 改 


(8) 可 以 在 右 侧面 板 中 看 到 默认 的 Bootstrap 导航 条 、 页 面 标题 和 一 段 文字 。 





























， 你 的 Roots 主题 安装 就 绪 了 。 


题 的 路 径 设置 出 了 问题 。 一 般 来 说 ， 这 时 候 只 要 在 “设置 | 固定 链接 ” 


， ”如 果 看 到 导航 条 或 文本 没有 应 用 上 默认 的 Bootstrap FEX, 则 说 明 Roots + 
中 重新 设置 固定 链接 就 可 以 了 。 


下 面 我 们 就 从 导航 项 开始 。 


3.3 配置 导航 条 





本 节 ， 我 们 为 站 点 页 面 添加 导航 条 中 的 导航 项 ， 此 外 还 会 为 图 标 添 加 相应 的 标记 。 
(1) 在 WordPress 的 仪表 板 中 ， 打 开 “ 外 观 | 菜单 ”。 
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编辑 菜单 


管理 位 置 


"TCR. Selber 


页 面 菜单 名 和 Primary Navigatio 
最 近 ”查看 所 下 菜单 结构 
抑 放 各 个 项 目 到 您 喜欢 的 顺序 ， 点 击 右 公 的 稍 头 可 进行 更 详细 的 设置 
do Home 

二 示例 页 面 

链接 

分 类 目录 

页 面 添加 到 此 菜单 





删除 东单 | sexe | 











(2) 删除 “示例 页 面 ”菜单 项 。 
(3) 编辑 “Home” 菜 单项 ,参照 第 2 章 中 的 index.html 文件 ， 在 “导航 标签 ”文本 框 中 添 


加 Font Awesome 字体 图 标的 HTML 标记 ， 完 成 后 的 内 容 如 下 : 





<span class="icon fa fa-home"></span> Home 





<span class-"icon fa fahome > 页 面 
</span> Hane 
导航 标签 标题 属性 


<span class= ”icon fa fa-h 


移动 下 一 位 











移 除 | 取消 





























(4) 接 下 来 再 为 其 他 页 面 创建 导航 项 ,目前 只 是 创建 简单 的 自 定义 链接 ,注意 对 应 每 个 页 


面 的 标记 要 正确 : 





链接 a 

URL # 

pim <span class-"icon fa fa- 
A 
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3.4 





(5) 换 名 话说， 要 在 “链接 文字 ”文本 框 中 添加 的 菜单 项 标记 如 下 : 


«span class-"icon fa fa-desktop"»«/span» Portfolio 
«span class-"icon fa fa-group"'»«/span» Team 
«span class-"icon fa fa-envelope"»«/span» Contact 


(6) 添加 完 所 有 导航 项 之 后 ， 保 存 菜单 。 


这 种 字体 。 因 此 ， 到 后 面 我 们 添加 这 种 字体 之 后 才能 看 到 图 标 。 


| Font Awesome 图 标 现在 还 不 可 用 。 Bootstrap 和 Roots 主题 默认 并 不 提供 ] 
A. 


(7) 下 面 打开 站 点 并 刷新 页 面 ， 就 会 看 到 添加 到 主导 航 的 链接 文本 了 。 





Bootstrappin' Home 











下 面 该 添加 首页 内 容 了 。 


添加 首页 内 容 


说 到 添加 首页 内 容 ， 两 个 方案 会 浮现 在 脑海 中 。 














片 ， 再 按照 标记 结构 把 它们 放置 到 位 。 











口 所 见 即 所 得 地 填充 : 复制 传送 带 和 分 栏 的 标记 ， 粘 贴 到 可 视 化 编辑 右 里 ， 然 后 上 传 图 


OQ 自 定义 栏目 : 使 用 WordPress 自 定义 栏目 输入 关键 元 素 一 一 传送 带 图 片 和 分 栏 的 内 容 ， 





然后 自 定义 模板 文件 ， 实 现 我 们 想 要 的 标记 结构 。 








和 引入 自 定义 栏目 的 方案 。 
在 本 章 的 练习 文件 中 , 可 以 找到 第 2 章 的 结 
id, 使 用 其 中 的 传送 带 的 分 栏 结构 。 






































第 一 个 方案 无 法 满足 长 远 需 要 ， 因 为 所 见 即 所 得 编辑 器 不 适合 处 理 复杂 标记 。 但 不 管 怎 
么 样 ， 这 是 目前 来 讲 最 快 的 方案 ， 可 以 让 我 们 快速 上 手 。 所 以 我 们 可 以 先 易 后 难 ， 到 最 
后 


文件 。 我 们 要 使 用 其 中 index.html 文件 的 标 


(1) 打开 第 2 章 的 index.html， 复 制 main 标签 中 的 所 有 代码 ， 不 包含 main。 





口 首先 是 传送 带 : 








«div id-"homepage-feature" class="carousel slide"> 


a 我 们 要 选择 所 有 标记 , 包括 三 个 分 栏 和 包含 它们 的 类 为 row 和 container 的 aiv 








标签 ， 这 样 就 到 了 对 应 的 </main> 标签 那里 。 


(2) 复制 上 一 步 中 选择 的 内 容 , 但 先 不 要 粘贴 到 WordPress 里 。 我 们 知道 ，WordPress 会 自 


动 为 内 容 添加 段落 标记 。 为 了 避免 触发 这 


个 行为 ,我 们 需要 先 清理 一 下 复制 的 内 容 。 
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(3) TE A HI PALOS 8] T ETAT FR AR a O P o 

(4) 删除 所 有 缩 进 ， 因 为 缩 进 会 在 我 们 把 代码 粘贴 到 WordPress 后 
中 整个 代码 块 ， 让 代码 左 移 ， 直 到 项 到 头 为 止 。 

(5) 然后 删除 独占 一 行 的 注释 ， 主 要 是 以 下 两 行 : 


«!-- Wrapper for slides --» 
<!-- Controls --> 


(6) 删除 所 有 空 行 ， 前 面 两 行 注释 上 方 都 有 空 行 。 
(D 复制 处 理 后 的 所 有 代码 。 








， 给 我 们 融 来 麻烦 。 


(8) 在 WordPress 仪表 板 中 ， 单 击 “ 页 面 "， 编 辑 名 为 Home 的 页 面 。 

















(9) 在 粘贴 之 前 ， 把 可 视 化 编辑 器 切换 至 文本 编辑 器 〈 单 击 右 上 角 的 “文本 ” 


下 图 所 示 : 





标签 )， 如 





Home 
固定 链接 : http://localhost/bootstrappin-potfolio/ 查看 页 面 


OJ 添加 媒体 


IL 
lili 


Bodo ocgRa4-—- 


























(10) ”把 标记 粘贴 到 编辑 框 内 。 
这 仅仅 是 开始 ， 接 下 来 我 们 要 上 传 图 片 。 




















s s Jn 图 片 
下 面 上 传 图 片 ， 并 将 它们 放 到 标记 中 合适 的 位 置 。 


(1) 在 第 2 章 项 目 文件 的 img 文件 夹 中 ， 可 以 找到 作品 图 片 和 Logo， 该 目录 截图 如 下 : 








国 img 

= bartlesvillecf.jpg 
emancipation.jpg 
logo.png 
okwu-athletics.jpg 
= okwu.jpg 


ld 








(2) 在 WordPress 的 Home 页 面 编 辑 器 中 ， 单 击 “ 添 加 媒体 ”按钮 上 传 图 片 。 





(3) 选择 并 上 传 4 张 作品 图 片 ， 如 下 图 所 示 : 
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插入 多 媒体 
上 传 文件 “媒体 库 


所 有 多 媒体 项 目 Y 

















(4) 如 下 图 所 示 ， 对 每 张 图 片 进行 设置 。 








a 填写 相应 的 “替代 文本 ”; 

口 在 “对 齐 方式 ”中 选择 “无 ”; 
O 在 “链接 到 ”中 也 选择 “无 ”( 当然 , 实际 上 每 张 作 品 图 片 都 应 该 链接 到 一 个 页 面 ); 
口 在 “不 寸 ” 中 选择 “完整 尺寸 ”。 








附件 详情 


okwu.jpg 
g 2015185 
KRR 


http;//localhost/wordpress^ 


okwu 


OKWU .edu Homepage 
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(5) 把 完整 大 小 的 4 张 图 片 分 别 插 和 人 到 标记 中 的 相应 位 置 ， 将 原先 的 标记 替换 为 新 的 。 
比如 下 面 这 行 原 来 的 代码 : 
«img src-"img/okwu.jpg" alt-"OKWU.edu Homepage"> 
应 该 变 成 类 似 下 面 这 样 的 代码 ( 其 中 的 sre 属性 会 因 你 的 WordPress 安装 位 置 而 有 所 
不 同 ): 

«img src-"http://localhost/wordpress/wp-content/uploads/2014/12/0kwu.jpg" 
alt-"OKWU.edu Homepage" width-"1600" height-"800" class-"alignnone size-full 
wp-image-18" /» 

每 张 图 片 都 如 法 炮制 。 

(6) 上 传 并 插入 作品 图 片 后 ， 可 以 看 一 看 效果 了 。 

(7) 打开 站 点 的 Home 页 面 ， 刷 新 一 下 。 如 果 一 切 顺 利 ， 应 该 能 看 到 如 下 面 屏 幕 截图 所 示 
的 结果 : 




















Home 





Welcome! Recent Updates Our Team 








mmm pm c 





主页 内 容 已 经 就 位 了 。 不 过 Boostrap 默认 的 颜色 、 传 送 带 尺 寸 ， 以 及 其 他 细节 都 在 。 稍 
后 我 们 会 修复 这 些 细节 ， 在 此 之 前 ， 我 们 要 先 解决 两 个 模板 问题 。 
主页 的 标题 不 是 我 们 想 要 的 一 一 这 是 标准 Roots 页 面 模板 的 配置 。 另 外 , 传送 带 的 宽度 与 
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3.5 








后 面 三 栏 的 宽度 一 样 。 查 看 页 面 元 素 会 发 现 ， 页 面 模板 把 整个 页 面 内 容 封 装 在 了 一 个 使 
用 Boostrap 的 container 类 的 元 素 中 ， 用 以 约束 页 面 内 容 的 宽度 。 








v«div class-"wrap container" role="document"> 
v«div classs"content row"» 


v«div class-"main col-sm-12" roles"main"» 





我 们 要 调整 模板 ， 删 除 页 面 的 标题 ， 同 时 把 传送 带 从 封装 它 的 元 素 中 解放 出 来 。 


自 定义 页 面 模板 


对 一 般 的 页 面 而 言 ， 我 们 一 定 想 显示 页 面 的 标题 。 当 然 ， 主 页 比较 特殊 ， 我 们 可 以 给 它 

写 一 个 模板 。 

接 下 来 ， 我 们 就 定义 一 个 页 面 模板 。 在 这 个 模板 中 ， 删 除 原来 的 标题 ， 突 出 页 面 内 容 。 

页 面 内 容 主 要 是 传送 带 和 三 栏 的 结构 化 标记 。 

(1) 在 themes 文件 夹 中 当前 主题 的 目录 下 , 找到 template-custom.php 文件 。 这 个 文件 是 一 
个 模板 的 示例 ， 使 用 它 可 以 快速 上 手 。 

(2) 复制 这 个 示例 模板 并 将 其 重 命名 为 page-home.php， 结 果 如 下 图 所 示 : 

















page-home.php 
æ template-custom.php 
> LJ templates 





(3) 用 编辑 器 打开 新 建 的 page-home.php 文件 ， 修 改 开始 位 置 的 注释 ， 将 模板 名 字 改 为 
Homepage Template: 
/* 
Template Name: Homepage Template 
ty 

(4) 保存 文件 。 

(5) 返回 WordPress 的 仪表 板 ,编辑 Home 页 面 。 把 它 的 页 面 模板 修改 为 新 创建 的 Homepage 
Template。 








Page Attributes 
Parent 


(no parent) < 


Default Template 
Custom Template 
Y Homepage Template k 
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3.6 


(6) 更 新 页 面 。 
(7) 不 用 刷新 浏览 右 查 看 结果 ， 因 为 不 会 有 什么 变化 。 还 是 接着 修改 模板 吧 。 
(8) 在 编辑 器 中 切换 到 打开 的 page-home.php 文件 ， 找 到 下 面 这 行 代码 : 


«?php get template part('templates/page', 'header'); ?> 


(9) 这 是 模板 中 仅 有 的 两 行 PHP 代码 的 第 一 行 ， 其 作用 是 插入 页 面 标题 。( 这 行 代码 导入 
的 模板 文件 是 templates 文件 夹 中 的 page-headerphp。) 想 修改 页 面 标题 ， 只 要 把 这 行 代 
码 删除 或 者 注释 掉 就 行 了 。 在 此 我 们 用 单行 注释 把 这 行 引入 标题 模板 的 代码 注释 掩 : 
«?php // get template part('templates/page', 'header'); ?> 
«?php get template part('templates/content', 'page'); ?> 





















































(10) 保存 这 个 文件 ， 在 浏览 器 中 刷新 查看 Home 页 面 。 结 果 应 该 像 下 图 一 样 ， 标 题 已 经 
不 见 了 : 

















我 们 迈 出 了 第 一 步 ! 第 二 步 就 是 把 传送 带 从 现 有 的 容器 元 素 中 解放 出 来 。 


理解 Roots 的 基准 模板 


Roots 主题 做 了 一 件 很 地 道 的 事 , 它 把 基本 的 布局 元 素 从 单个 模板 文件 中 给 抽 了 出 来 , 放 
到 了 一 个 叫 base.php 的 文件 中 。 下 面 我 们 就 来 讲 这 个 模板 。 

首先 ， 我 们 注意 到 base.php 引用 了 lib 文件 夹 中 的 config.php 文件 定义 的 基本 布局 指令 。 
我 们 打开 这 个 config.php 文件 看 一 下 , 但 不 会 改动 它 。 关于 这 个 文件 的 更 多 信息 , 可 以 参 
考 下 面 两 个 页 面 。 

口 Roots 101: http://roots.io/roots-101 

口 An Introduction to the Roots Theme Wrapper: http://roots.io/an-introduction-to-the-roots- 








theme-wrapper/ 
当下 ， 我 们 只 要 知道 自己 可 以 决定 主 栏 和 侧 边栏 使 用 什么 类 ， 以 及 哪些 页 面 不 包含 标准 
的 侧 边栏 就 可 以 了 。 
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在 config.php 中 搜索 “main class”， 可 以 找到 设置 main 和 sidebar 类 的 代码 。 如 果 页 面 
包含 侧 边栏 ， 则 main 元 素 会 被 赋予 col-sm-8 类 ,将 其 宽度 限制 为 容器 宽度 的 三 分 之 
Z; 侧 边栏 则 会 被 赋予 col-sm-4 类 。 如 果 没 有 侧 边 栏 ， 主 栏 的 类 就 是 co1-sm-12， 与 
容 需 同 宽 。 


/** 
* .main classes 
xy 
function roots main class() ( 
if (roots display sidebar()) ( 
// Classes on pages with the sidebar 
$class - 'col-sm-8'; 
) else ( 
// Classes on full width pages 
$class = 'col-sm-12'; 
} 
return $class; 
H 
/** 
* .sidebar classes 
* 
function roots sidebar class() ( 
return 'col-sm-4'; 


} 


以 上 代码 中 的 类 名 表明 , 我 们 页 面 布局 从 单 栏 切换 到 多 栏 的 断 点 是 ascreen-sm。 WR 
改 断 点 ， 非 常 简单 。 同 样 地 ， 想 要 修改 主 栏 和 侧 边栏 的 宽度 ， 也 很 简单 ， 都 是 只 修改 类 
名 就 行 。 换 名 话说 ， 对 这 一 个 文件 的 修改 ， 可 以 影响 整个 站 点 中 所 有 页 面 和 文章 的 布局 ， 
而 不 必 再 组 合 使 用 多 个 模板 文件 了 。 乍 一 看 不 太 好 理解 ， 但 好 处 十 分 明显 。 


HX, config.php 中 确定 哪些 页 面 显 示 侧 边栏 ， 哪 些 不 显示 的 代码 片段 如 下 : 


/** 
* Define which pages shouldn't have the sidebar 
* 
*J 
function roots display sidebar() ( 
$sidebar config = new Roots Sidebar( 






































array( 
'is_404', 
'is_front_page' 
), 
array( 
'template-custom.php' 
) 
); 
return apply filters('roots display sidebar', $sidebar config-»display); 


} 
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默认 情况 下 ， 头 版 页 面 ( font page )、404 页 面 ， 以 及 其 他 使 用 自 定义 页 面 模板 的 页 面 都 
不 会 包含 侧 边栏 。 修 改 这 两 个 数组 ， 添 加 或 删除 页 面 或 模板 ， 就 可 以 自 定义 站 点 的 整体 
或 个 别 页 面 的 布局 。 


明白 了 这 些 ,， 接 下 来 用 编辑 器 打开 主题 目录 下 的 base.php。 
浏览 一 遍 这 个 文件 ， 会 发 现 它 做 了 以 下 几 件 事 。 
口 拉 进 了 页 面 的 <nead>， 见 templates 文件 夹 中 的 head.php 文件 。 

















«?php get template part('templates/head'); ?> 
口 给 出 body 标签 和 它 的 类 。 
«body «?php body class(); ?>> 








口 视 情 况 拉 进项 部 的 导航 栏 或 带 常 规 导 航 的 头 部 ， 见 header-top-navbar.php 和 header.php 
模板 。 


<?php 
do action('get header'); 
// Use Bootstrap's navbar if enabled in config.php 


if (current theme supports('bootstrap-top-navbar')) ( 
get template part('templates/header-top-navbar'); 
) else ( 


get template part('templates/header'); 
} 


?> 
口 往 底部 看 ， 它 又 拉 进 了 脚 部 ， 见 templates 文件 夹 中 的 footer.php 文件 。 
«?php get template part('templates/footer'); ?> 























口 而 在 中 间 ， 则 是 定义 页 面 内 容 结构 的 代码 。 
a 先是 一 个 容 右 和 一 行 : 


<div class="wrap container" role="document"> 
<div class="content row"> 





























e REN main 的 div, 通过 roots_main_class 方法 决定 列 宽 : 





«div class-"main <?php echo roots main class(); ?>" role="main"> 





还 记得 吗 ? roots main class 方法 是 在 lib 文件 夹 下 的 config.php 中 
一 定义 的 。 








u 使 用 适当 模板 展示 当前 页 面 内 容 : 


«?php include roots template path(); ?> 


um 关闭 .main HJ div 标签 ; 
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«/div»«!-- /.main --» 
n 如 果 需 要 ， 则 显示 带 有 Bootstrap 类 的 侧 边 栏 : 
«?php if (roots display sidebar()) : ?> 
«aside class-"sidebar «?php echo 
roots sidebar class(); ?>" role-"complementary"» 
«?php include roots sidebar path(); ?» 
«/aside»«!-- /.sidebar --> 


«?php endif; ?» 
[ 决定 哪些 页 面 应 该 带 侧 边 栏 以 及 侧 边栏 类 名 的 ， 还 是 config php 文件 。 ] 


m 关闭 两 个 div 标签 : .conent 和 .wrap， 它 们 分 别 还 有 row F container 类 。 


«/div»«!-- /.content --> 
«/div»«!-- /.wrap --» 


内 容 不 少 ， 概 括 如 下 : 

O Roots 的 base.php 模板 提供 了 导航 条 和 页 脚 之 间 的 所 有 内 容 ， 这 些 内 容 包含 在 一 个 带 
Bootstrap container 类 的 元 素 中 ， 以 便 约 束 其 宽度 ， 避 免 全 宽 ; 

口 我 们 需要 让 传送 带 全 宽 ， 并 在 合适 的 时 候 和 地 方 再 应 用 container 类 。 

我 们 可 以 简单 地 从 base.php 中 删除 container 类 , 然后 相应 地 调整 其 他 元 素 。 但 事实 上 
只 有 首页 才 需 要 全 宽 ， 这 样 做 反倒 会 弄 乱 标准 模板 ， 造 成 很 多 不 必要 的 麻烦 。 

为 此 ， 可 以 换 一 种 更 有 针对 性 的 做 法 : 针对 首页 新 建 一 个 模板 。Roots 对 这 种 做 法 支持 得 
很 好 。 


3.7 创建 自 定义 的 基本 模板 


Root 主题 确实 强大 ， 昌 然 base.php 文件 为 整个 站 点 定义 了 基本 布局 ,但 我 们 仍然 可 以 弄 

一 个 自己 的 基本 模板 ， 在 必要 的 时 候 自 定义 基本 布局 的 结构 。 下 面 我 们 就 针对 首页 来 做 

一 次 自 定 义 。 

(1) 复制 base.php 文件 。 

(2) 把 副本 命名 为 base-page-home.php , 因为 前 面 已 经 设置 页 面 使 用 page-home.php 模板 文 
件 了 ， 所 以 Roots 会 按 同 样 的 文件 名 来 读 取 基 本 模板 ， 如 果 找 到 这 个 文件 ， 就 将 其 作 


为 首页 的 模板 。 
base-page-home.php 
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ui lcu - 


[s 要 了 解 基本 模板 选择 函数 的 更 多 信息 ， 参 见 Roots 的 相关 文档 : 


(3) 在 编辑 器 中 打开 新 的 base-page-home.php 文件 。 
(4) 找到 人 带 wrap 类 的 aiv 标签， 去 掉 它 的 container 类 ， 结 果 如 下 : 


«div class-"wrap" role-"document"» 

(5) 我 们 会 在 合适 的 时 候 使 用 container %, 特别 是 对 传送 带 下 面 的 三 栏 。 同 样 ， 下 面 
还 要 去 掉 这 个 模板 中 的 row 和 column 类 。 

(6) 紧 接 着 是 类 为 content 的 aiv 标签 ， 去 掉 row 类， 结果 如 下 : 


«div class-"content"'» 


(7) 最 后 ， 还 要 去 掉 类 为 main 的 aiv 中 的 PHP 脚本 ， 因 为 我 们 不 需要 roots main. 
class 在 这 文 里 生成 的 colum 类 ， 这 行 代码 应 该 变 成 这 样 : 


«div class-"main" role="main"> 
(8) 保存 文件 。 
(9) 在 浏览 需 中 刷新 Home 页 面 。 
应 该 看 到 传送 带 已 经 与 屏幕 一 样 宽 了 。 


























Welcome! Recent Updates Our Team 








是 不 是 有 点 像 变 魔术 ? 
还 记得 我 们 贴 到 所 见 即 所 得 编辑 器 中 的 代码 中 包含 的 container, row 和 column 类 吧 ， 
它们 就 是 用 来 约束 页 面 内 容 宽度 的 。 
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3.8 





接 下 来 差不多 就 可 以 自 定义 样式 了 。 但 在 此 之 前 ， 为 了 让 标记 更 容易 维护 ， 我 们 得 再 做 
一 些 清理 工作 。 


在 自 定义 结构 中 使 用 自 定 义 栏目 


如 前 所 述 ， 所 见 即 所 得 编辑 器 并 不 适合 用 来 编辑 我 们 的 主页 内 容 。 因 为 这 个 页 面 里 要 月 
定义 的 标记 结构 很 多 。WordPress 内 置 的 这 个 编辑 器 是 用 于 编写 文字 和 图 片 的 , 不 适合 容 
右 、 行 、 列 和 传送 带 。 因 此 ， 我 们 还 是 使 用 WordPress 的 自 定义 栏目 来 控制 这 些 内 容 吧 。 
关于 WordPress 的 自 定义 栏目 (custome field )， 可 以 参见 这 里 : http://codex.wordpress.org/ 
Custom Fields。 


操作 步骤 简单 直观 。 我 们 要 为 传送 带 中 的 每 一 张 图 片 创 建 一 个 自 定义 栏目 ， 然 后 再 为 它 
下 面 的 每 一 栏 创 建 一 个 自 定义 栏目 。 


(1) 在 WordPress 编辑 器 中 打开 Home 页 面 ， 复 制 每 张 图 片 的 标记 : 








Home 

固定 链接 : http://localhost/wordpress/ 查看 页 面 

O) 添加 媒体 可 视 化 ZE 
b j nk b-quote || det ns img ul o code more ” 关闭 标签 I 
«div id-"homepage-feature" class-"carousel slide"» 


«ol class-"carousel-indicators"» 
ata-slide-to-"o" 





«li data-target-"shomepage-feature" d 0" class-"active"»«/li» 
«li data-target-"shomepage-feature" data-slide-to-"1"»«/li» 

«li data-target-"shomepage-feature" data-slide-to-"2"»5 i 

«li data-target-"shomepage-feature" data-slide-to-"3" 

</ol> 

«div class-"carousel-inner"» 

«div class-"item active"» 

<img src-"http://localhost/wordpress/wp-content/uploads/2014/12/okwu. jpg" 


alt-"OKWU.edu Homepage" width-"1609" height-"800" class-"alignnone size-full wp- 
image-18" /> 








«/div» 





e Community 








Foundation" width-"1600" height-"800" class-"alignnone e-full wp-image-16" /> 
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然后 ， 分 别 为 它们 创建 一 个 自 定义 栏目 ， 


命名 为 iteml 、 


item2 、 


item3 和 item4。 








除 ， 更 新 


n 
i 
可 


除 EH 


F 
3 
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WP ^ 更 新 


m" 
3 
B 




















除 ， 更 新 


名 称 là 


<img c g 
src-"http://localht 









t/wordpr 





<img class-"a 
srce"http:// 





S/Wp- 


nnone size-full 
alhost/wordpr 














«img clas 
src-"http:// 






ignnone size-fu 
ocalhost/word 

















ne size-full wp-image-18' 


ill wp-image-19" 


mage-16' 


p-image-17" 























(2) 接 下 来 是 栏 内 容 ,分 别 命名 为 columnl column2 和 column3, 包括 标题 、 段 落 和 按钮 


标记 。 


注意 每 一 栏 的 内 容 并 不 止 上 图 中 显示 的 内 容 ， 


S 
A 


内 容 : 








column1 


Ws EH 


column2 





除 mm 





column3 


WR ， 更 新 




















ome!</h2> 
Suspendisse et arcu felis, ac gravida turpis 


<h2>Recent Upda 
Suspendisse et arcu fe 





s, ac gravida turpis. 


<h2>Our Team</ 
Suspendisse et arcu felis, ac gravida turpis. 














拖 动 文本 区 ,可 以 看 到 其 中 包含 的 全 部 








column3 


WR E 


<a class= 
href="#">Meet t 









primary pull-right" 
am! </a> 

















(D WordPress 3.1 之 后 ， 编 辑 页 面 中 的 某 些 选 








先 项 默认 会 隐藏 ， 这 时 请 单 击 页 

















栏目 "， 就 可 以 在 编辑 区 下 面 看 到 自 定义 栏目 了 。 一 一 译 者 注 





面 右上 角 的 “显示 选项 *， 然 后 勾 选 
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(3) 更 新 页 面 ， 保 存 我 们 的 工作 。 
好 了 ， 现 在 该 把 这 些 栏目 放 到 目标 标记 中 ， 也 就 是 说 又 要 创建 模板 了 。 




















创建 自 定义 的 内 容 模 板 
我 们 已 经 为 主页 创建 了 自 定义 的 基本 结构 ， 设 置 了 自 定 义 的 页 面 模板 ， 去 掉 了 常规 的 页 
面 标题 。 接 下 来 轮 到 为 页 面 内 容 创建 自 定义 模板 了 。 


Roots 用 来 管理 内 容 循 环 的 模板 文件 是 templates 文件 夹 中 的 content-page.php 、 
content-single.php 和 content.php: 














LI templates 
男 'omment.php 
B; comments.php 
content-page.php 
content-single.php 


B content.php 


æ entry-meta.php 





打开 文件 ， 可 以 看 到 标准 文章 和 页 面 的 循环 指令 。 
我 们 要 创建 content-page.php 的 自 定义 版 本 。 

(1) 复制 content-page.php。 

(2) 把 副本 命名 为 content-home.php。 

(3) 在 编辑 器 中 打开 content-home.php， 可 以 看 到 如 下 代码 : 


<?php while (have posts()) : the post(); ?> 
«?php the content(); ?> 
<?php wp link pages(array('before' => '«nav class-"pagination'»', 
'after' -»2'«/nav»')); ?> 
«?php endwhile; ?» 


(4) 这 个 循环 做 了 两 件 事 : 

口 从 所 见 即 所 得 编辑 右 中 取得 内 容 

O (如 果 需 要 ) 创建 分 页 链接 

(5) 我 们 想 要 修改 循环 ， 取 得 所 见 即 所 得 编辑 器 中 的 自 定义 栏目 ， 所 以 删除 这 一 行 : 
<?php the content(); ?> 

(6) 主页 不 需要 显示 分 页 链接 ， 因 此 把 这 一 行 也 删除 : 


<?php wp link pages(array('before' => '«nav class="pagination">', 
'after' => '«/nav»')); ?» 


删除 之 后 我 们 再 放 一 句 话 ， 作 为 测试 用 。 
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(7) 输入 : Hello this is a test!。 
(8) 接 下 来 需要 修改 page-home.php 模板 ， 使 用 这 个 新 的 内 容 循环 。 
(9) 打开 page-home.php。 
(10) 修改 下 面 这 行 代码 : 
«?php get template part('templates/content', 'page'); ?> 
JE "page" PUN, "home": 
«?php get template part('templates/content', 'home'); ?> 
这 样 就 可 以 让 这 个 模板 文件 使 用 templates 文件 夹 中 新 的 内 容 模板 content-home.php T o 
(11) 保存 修改 。 
(12) 刷新 主页 。 
应 该 看 到 一 行文 本 和 默认 的 页 脚 。 
Bootstrappin ^ Home Sample Page 
祝贺 你 ， 新 的 内 容 模板 生效 了 。 现 在 该 给 它 添 加 内 容 了 ， 我 们 要 通过 自 定 义 栏目 来 构建 
传送 带 。 
3.9.1 通过 自 定义 栏目 构建 传送 市 








我 们 需要 从 相应 的 自 定 义 栏 目 取 得 每 个 传送 带 图 片 的 标记 。 如 前 所 述 ， 关 于 自 定义 栏目 
的 详细 信息 ， 可 以 看 这 里 : http://codex.wordpress.org/Custom Fields。 


下 面 从 取得 每 一 项 开始 。 
(1) 删除 content-home.php 中 的 测试 文本 ， 此 时 文件 就 只 剩 下 面 两 行 代 码 了 : 


«?php while (have posts()) : the post(); ?> 
«?php endwhile; ?> 


(2) 接 下 来 我 们 要 在 这 两 行 之 间 添 加 代码 。 
(3) 要 取得 传送 带 的 第 一 项 ， 需 要 引用 该 自 定义 栏目 的 名 称 iteml， 那 就 要 使 用 下 面 这 行 
代码 : 


<?php $item="item1"; echo get post meta($post-»ID, $item, true); ?> 


这 行 代码 为 iteml 创建 一 个 PHP 变量 ,并 在 get_post_meta() 模 板 标签 中 引用 了 它 。 
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参数 Spost->ID、$item 和 true 表示 要 取得 当前 文章 (或 页 面 ) 中 名 为 itemi 的 栏 
目 ， 并 返回 其 字符 串 表 示 。( 最 后 一 个 参数 如 果 传 人 false， 则 返回 一 个 数组 。) 


(4) 保存 文件 ， 刷 新 主页 ， 应 该 看 到 第 一 张 图 片 : 























(5) 好 了 ， 下 面 就 只 要 复制 修改 上 面 那 行 代码 ， 分 别 取 得 对 应 项 的 标记 即 可 ， 结 果 如 下 : 


<?php $item-"item1"; echo get post meta($post-»ID, $item, true); ?> 
<?php $item-"item2"; echo get post meta($post-»ID, $item, true); ?> 
<?php $item-"item3"; echo get post meta($post-»ID, $item, true); ?> 
<?php $item-"item4"; echo get post meta($post-»ID, $item, true); ?> 





保存 并 刷新 主页 ， 应 该 能 看 到 全 部 四 张 图 片 ， 从 上 到 下 显示 在 页 面 上 。 


接 下 来 要 把 它们 封装 在 传送 带 标记 中 。( 别 忘 记 , 相应 的 标记 可 以 到 index.html RAAR 
个 所 见 即 所 得 编辑 需 里 面 找 。) 


(6) 先 复制 父 aiv 及 紧 随 其 后 的 传送 带 指示 器 ， 代 码 片 段 如 下 : 


«?php while (have posts()) : the post(); ?> 
«div id-"homepage-feature" class="carousel slide"'» 

«ol class-"carousel-indicators"- 
«li data-target-"f4thomepage-feature" data-slide-to-"O"class-"active"»«/li» 
«li data-target-"t4£homepage-feature" data-slide-to-"1"»«/li» 
«li data-target-"t4£homepage-feature" data-slide-to-"2"»«/li» 
«li data-target-"t4£homepage-feature" data-slide-to-"3"»«/li» 

«/ol» 


(7) 然后 是 carousel-inner 元 素 的 开始 标签 ， 以 及 封装 每 张 图 片 的 类 为 item 的 div, 
第 一 个 还 要 加 个 active 25. 
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«div class-"carousel-inner"'» 
«div class-"item active"-» 
<?php $item-"itemi1"; echo get post meta($post-»ID, $item, true); ?> 
</div> 
<div class="item"> 
<?php $item="item2"; echo get post meta($post-»ID, $item, true); ?> 
</div> 
<div class="item"> 
<?php $item="item3"; echo get post meta($post-»ID, $item, true); ?> 
«/div» 
«div class-"item"» 
<?php $item-"item4"; echo get post meta($post-»ID, $item, true); ?> 
«/div» 
«/div»«!-- /.carousel-inner --» 


(8) 最 后 是 传送 带 的 控件 。 


<!-- Controls --» 
«a class-"left carousel-control" href-"tfthomepage-feature" data-slide-"prev"» 
<span class-"icon-prev"»«/span» 
</a> 
<a class="right carousel-control" href="#homepage-feature" data-slide="next"> 
<span class="icon-next"></span> 
</a> 
</div><!-- /#homepage-feature.carousel --> 


(9) 填充 完 以 上 传送 带 标记 ， 保 存 文件 。 
刷新 浏览 器 ， 就 又 能 看 到 传送 带 了 。 















































下 一 节 我 们 添加 三 栏 内 容 。 
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3.9.2 使 用 自 定义 栏目 构建 三 栏 内 容 
添加 分 栏 内 容 的 过 程 与 上 一 节 类 似 。 
使 用 如 下 模板 标签 可 以 取得 每 一 栏 : 


<?php $column-"column1"; echo get post metal($post->ID, $column, true); ?> 
<?php $column-"column2"; echo get post meta($post-»ID, $column, true); ?> 
<?php $column-"column3"; echo get post meta($post-»ID, $column, true); ?> 


然后 ， 同 样 需要 把 每 一 栏 内 容 封装 到 各 自 的 标记 中 ,包括 相应 的 container. row 和 


column 类 。 





«div class-"page-contents container"» 
«div class="row"> 
«div class-"col-sm-4"- 
<?php $column-"columni1"; echo get post meta($post-»ID, $column, true); ?> 
«/div» 
«div class-"col-sm-4"- 
<?php $column-"column2"; echo get post meta($post-»ID, $column, true); ?> 
«/div» 
«div class-"col-sm-4"- 
«?php $column-"column3"; echo get post meta($post-»ID, $column, true); ?> 





</div> 
«/div»«!-- /.row --> 
«/div»«!-- /.container ---» 


保存 结果 ， 刷 新 主页 ， 应 该 能 看 到 传送 带 下面 出 现 了 三 栏 内 容 。 


Wecome Recent Updates 





接 下 来 ,我 们 再 加 入 页 脚 内 容 。 
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3.10 ”加 入 页 脚 内 容 


Roots 自 带 了 一 个 页 脚 小 工具 ， 我 们 可 以 用 它 来 布置 社交 媒体 图 标 。 


(1) 在 WordPress 的 仪表 板 中 ， 打 开 “ 外 观 | 小 工具 ”。 
(2) 在 最 右边 ， 可 以 看 到 “页 脚 ”。 

(3) 单 击 它 以 扩展 。 

(4) 把 “文本 ” 拖 进 去 。 

(5) 从 index.html 中 复制 社交 媒体 图 标 部 分 的 代码 片段 : 


«ul class-"social"'» 
































«li»«a href="#" title-"Twitter Profile"»«span class-"icon fa 
fa-twitter"»«/span»«/a»«/li» 

«li»«a href="#" title-"Facebook Page"»«span class-"icon fa 
fa-facebook"»«/span»«/a»«/li» 

«li»«a href="#" title-"LinkedIn Profile"»«span class-"icon fa 
fa-linkedin"»«/span»«/a»«/li» 

<li><a href-"£" title-"Google-« Profile"»«span class-"icon fa 
fa-google-plus"»«/span»«/a»«/li» 

«li»«a href="#" title-"GitHub Profile"»«span class-"icon fa 
fa-github-alt"»«/span»«/a»«/li» 
«/ul» 


(6) 把 代码 片段 粘贴 到 大 文本 区 中 。、 





Di: 







ofile"><span class-"icon fa 
'age"»«span class-"icon 


ofile"»«span class-"icon 


自动 分 自 


Mine 
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3.11 


(7)“ 标 题 ” 空 着 。 

(8) 不 要 选择 “自动 分 段 ” 复 选 框 。 

(9) 单 击 “ 保 存 ” 按 钮 。 

(10) 刷新 主页 。 
图 标 是 放 在 一 个 无 序列 表 中 的 。 由 于 没有 应 用 样式 ， 而 且 也 没有 设置 图 标 字 段 ， 所 
以 只 能 看 到 无 序列 表 的 项 目 符号 。 




















ultrices est. ultrices es 





看 来 ， 下 面 必须 得 把 这 个 自 定义 站 点 的 资源 用 起 来 了 。 
在 使 用 Roots 的 资源 之 前 , 我 们 还 是 先 看 看 它 提供 了 什么 资源 吧 。 这 样 我 们 就 会 对 下 一 步 ES 
EREA RTT. - 











Roots 的 assets 文件 夹 里 有 什么 


Roots 主题 把 自己 的 ess, less, js 和 img 文件 夹 集中 放 在 了 assets 文件 夹 中 。 打 开 assets 
文件 来， 你 会 发 现 其 中 的 结构 与 第 2 章 的 个 人 作品 站 点 的 结构 非常 相似 ， 当 然 那 又 是 基 
于 HTML5 Boilerplate 的 。 
稍 后 我 们 会 用 自己 的 资源 来 替换 Roots 的 资源 。 但 在 此 之 前 , 我 们 应 该 知道 Roots 是 怎么 
调动 这 些 资源 的 。 可 以 把 Roots 的 assets 文件 夹 全 部 展开 ， 内 容 如 下 图 所 示 : 









































v Lj assets 
v (El css 


=, editor-style.css 


= main.min.css 
v E fonts 
F8 glyphicons-halflings-regular.eot 
=, glyphicons-halflings-regular.svg 
glyphicons-halflings-regular.ttf 
F8 glyphicons-halflings-regular.woff 
Y" lj img 
Y js 
®%) main.js 
> Lj plugins 
*' scripts.min.js 
> [ vendor 
v 国 less 
四 app.less 
> Li bootstrap 
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Roots 的 在 线 文档 (http://roots.io/roots-101/#theme-assets ) 对 这 些 文件 之 前 如 何 配合 给 出 

了 解释 。 

O less 文件 夹 中 的 app.less 负责 管理 所 有 样式 规则 。 这 个 文件 先 从 bootstrap 文件 夹 中 的 
bootstrap.less 文件 中 引入 所 有 Bootstrap 样式 ， 然 后 给 出 了 很 多 注释 和 推荐 的 选择 符 ， 
在 此 基础 上 可 以 编写 自 定义 的 LESS 代码 。 

口 这 个 app.less 文件 会 被 编译 成 main.min.ess 文件 保存 到 ess 文件 夹 中 。 

口 同样 在 ess 文件 夹 中 ， 还 有 一 个 editor-style.css 文件 ， 是 用 来 自 定义 WordPress 可 视 化 
编辑 器 外 观 的 。 

口 js 文 件 夹 中 包含 main.js 文件 , 是 用 来 保存 自 定义 JavaScript 代码 的 。( 这 个 文件 中 定义 
了 一 个 方法 ， 必 要 时 可 用 于 指定 和 限制 其 中 JavaScript 代码 的 作用 域 。) 

口 js 文件 夹 中 还 有 一 个 plugins 文件 夹 ,用 于 保存 Bootstrap 插件 ,也 可 用 来 管理 其 他 插件 。 

O 5 HTMLS Boilerplate 类 似 ，vendor 文件 夹 中 包含 的 基本 上 都 是 独立 的 文件 库 ， 默认 包 
含 jQuery 和 Modernizr。 

口 另外 ，Roots 的 设计 不 是 把 所 有 插件 组 合 到 一 个 plugins.js 文件 中 ， 而 是 通过 main.js 整 
合 所 有 插件 ， 并 生成 一 个 叫 scripts.min.js 的 文件 。 

在 Roots 主题 的 根 文件 夹 中 ,还 有 一 个 Gruntfile js 文件 ,可 以 通过 它 把 LESS 编译 成 CSS ， 

以 及 合并 和 压缩 JavaScript 文件 ( 系统 中 必须 安装 Grunt )。 

当然 ,我 们 不 依靠 Grunt 帮 有 我 们 做 这 些 。 前 几 章 使 用 的 LESS 编译 右 就 够 用 了 。 至 于 合并 

压缩 JavaScript， 我 们 也 采用 其 他 方式 ， 具 体 可 参见 附录 A。 

目前 ， 我 们 只 想 把 第 2 章 弄 好 的 样式 、 脚 本 和 字体 都 拿 进来 。 而 最 简单 、 最 直观 的 方式 

就 是 用 我 们 自己 的 assets 文件 夹 来 替换 Roots 的 assets 文件 夹 。 

3.12 ”更 换 设计 资源 


在 本 章 的 练习 文件 中 , 有 一 个 BOOTSTRAPPIN PORTFOLIO ASSETS 文件 夹 , 其 中 有 
第 2 章 的 资源 文件 ， 不 过 稍微 有 点 改动 。 

要 是 你 真 的 去 看 ， 会 发 现 改 动 了 这 么 几 个 地 方 。 首 先 我 把 favicon.ico 和 apple-touch-icon- 
precomposed.png 文件 从 主 文件 夹 挪 到 了 ico 文件 夹 中 。 但 最 关键 的 还 是 我 按照 附录 A 的 
操作 步骤 优化 压缩 了 CSS 和 JavaScript 文件 : main.css、main.js 和 plugins.js。 

打开 BOOTSTRAPPIN PORTFOLIO ASSETS 文件 夹 , 可 以 看 到 下 图 所 示 的 结构 , 其 中 
会 直接 在 我 们 主题 中 使 用 的 都 被 选中 突出 显示 了 : 
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v ui css 
!" main-pre-optimized.css 
L3 fonts 
v lj ico 
E apple-touch-icon-precomposed.png 
[B favicon.ico 
E img 
= alittlecode.jpg 
E bso.jpg 
= okwu-athletics.jpg 
£u okwu.jpg 
æ index.html 
v js 
> [d bootstrap 
男 plugins-all.js 
= plugins-uncompressed.js 
> (D vendor 
> Ø less 


v 





4 

















最 容易 的 推进 方式 就 是 直接 蔡 换 : 

(1) 把 Roots 的 assets 文件 夹 重 命名 为 “ROOTS-ASSETS-ORIGINAL; 

(2) 重 命名 BOOTSTRAPPIN PORTFOLIO ASSETS 为 assets; 

(3) 接 下 来 别 忘 了 更 新 CSS 和 JavaScript 文件 的 链接 ， 因 为 Roots 的 命名 方式 不 太一 样 ; 
(4) 如 果 现 在 就 刷新 站 点 ， 会 发 现 一 切 都 乱 套 了 ， 当 然 ， 这 是 没有 应 用 样式 表 的 结果 。 


下 面 我 们 来 链接 样式 表 。 











3.13 ”链接 样式 表 


链接 样式 表 就 是 更 新 Roots 文件 ， 使 用 main.css 样式 表 。 
(1) 查看 WordPress 的 源 代码 ， 会 发 现 样 式 表 链接 的 路 径 没 错 ， 但 文件 名 是 后 级 有 版 本 号 
的 main.min.css， 以 我 本 地 安装 的 WordPress 为 例 ， 样 式 表 的 路 径 如 下 : 


<link rel="stylesheet" href="http://localhost:8888/bootstrappin-portfolio/ 
assets/css/main.min.css?ver-9a2dd99b82ca3385b034e8730b94139d2"» 


Roots Gruntfile 会 使 用 MDS 散 列 算法 生成 版 本 号 。( 参 见 在 线 文档 : 
http://roots.io/using-grunt-for-wordpress-theme-development/。 ) 这 种 工作 流 
程 很 好 ， 但 超出 了 本 书 讨论 范围 。 我 们 不 会 给 文件 生成 版 本 号 。 











Q) 只 要 把 链接 中 的 文件 名 改 成 main.css 就 行 了 。 
(3) Roots 通过 lib 文件 夹 中 的 scripts.php 来 管理 到 样式 表 和 脚本 文件 的 链接 。 
(4) 用 编辑 器 打开 scripts.php。 
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(5) 找到 现在 这 行 代码 : 


wp. enqueue style('roots main', get template directory uri() 
'/assets/css/main.min.css', false, '9a2dd99082ca3380034e873009413982'); 


把 它 改 成 : 


wp enqueue style('roots main', get template directory uri() 
'/assets/css/main.css', false, null); 


(6) 保存 修改 ,刷新 浏览 器 看 看 效果 。 应 该 可 以 看 到 我 们 自 定义 的 样式 ,还 有 Font Awesome 
字体 图 标 ， 如 下 所 示 : 








Welcome! Recent Updates Our Team 








休息 一 会 儿 。 


此 时 传送 带 并 不 会 运行 ， 而 且 响 应 式 的 导航 按钮 也 不 起 作用 。 这 些 都 需要 重新 链接 
JavaScript 文件 。 





3.14 ”链接 JavaScript 文件 


如 前 所 述 ，Roots 用 同一 个 文件 管理 JavaScript 和 CSS 文件 的 链接 。 
好 ,现在 scripts.php 还 在 编辑 器 中 打开 着 ,首先 来 检查 一 下 jQuery 的 本 地 后 备 仍 然 有 效 。 
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(1) 找到 以 下 代码 ， 大 概 在 scripts.php 文件 的 中 间 位 置 : 


if ($add jquery fallback) ( 


echo '«script»window.jQuery || document.write (\'<script 
Src-"' . get template directory uri() 
'/assets/js/vendor/jquery- 
1.10.2.min.js"»«M/script»V')«/script»' . "Mn"; 


S$add jquery fallback = false; 
} 


(2) 需要 确认 这 里 的 路 径 和 文件 名 与 下 面 一 致 : 
/assets/js/vendor/jquery-1.10.2.min.js 


在 本 书写 作 时 ,练习 文件 夹 03_ Code BEGIN 中 保存 的 第 2 章 所 用 的 HITML5 Boilerplate 
版 本 与 Roots 主题 是 同步 的 ， 所 以 文件 一 致 。 


如 果 你 想 使 用 不 同 版 本 的 jQuery， 还 应 该 更 新 Google CON 的 链接 ， 相 应 代码 在 稍 靠 
前 的 位 置 : 
if (!is admin() && current theme supports('jquery-cdn')) ( 
wp deregister script('jquery'); 
wp register script('jquery', 
'//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', 
false, null, false); 


(3) 接 下 来 再 检查 Modernizr 脚本 的 链接 。 
































第 1 章 介 绍 过 ，Modernizr 可 以 让 Internet Explorer 8 支持 HTML5, UA 
~ 其 他 一 些 新 特性 。 所 以 我 们 确实 需要 它 。 


在 文件 上 方 roots scripts O 图 数 中 ， 可 以 找到 Modernizr 的 链接 : 


wp register script('modernizr', get template directory uri() 
'/assets/js/vendor/modernizr-2.6.2.min.js', false, null, 
false); 


这 里 要 看 一 下 路 径 、 文 件 名 和 版 本 是 否 匹 配 。 同 样 ， 本 书 提供 的 练习 文件 是 匹配 的 。 
如 果 你 愿意 ， 可 以 自己 改 。 

(4) 最 后 ， 我 们 得 添加 到 plugins.js 和 main.js 文件 的 链接 ， 切 断 原来 Roots 模板 中 的 文件 
链接 。 我 们 先 删除 ， 后 添加 。 


口 打开 lib 文件 夹 的 scripts.php 文件 。 
口 Roots 是 把 插件 和 自 定义 脚本 组 合 到 一 个 文件 中 ， 并 使 用 以 下 代码 注册 的 : 


wp register script('roots scripts', 
get template directory uri() 
'/assets/js/scripts.min.js', false, 
'2a3e700c4c6e3dà70a95500241a845695', true); 
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把 这 一 行 删除 或 注释 掉 。 
口 接着 还 要 删除 下 面 这 行 ， 就 在 前 面 那 行 代码 后 面 : 


wp enqueue script('roots scripts'); 


a 接着 用 如 下 代码 注册 我 们 的 两 个 脚本 文件 : 


wp register script('plugins script', 
get template directory uri() . '/assets/js/plugins.js', 
false, null, true); 

wp register script('main script', 
get template directory uri() . '/assets/js/main.js', 
false, null, true); 


口 再 把 它们 加 入 队列 : 


wp. enqueue script('plugins script'); 
wp. enqueue script('main script'); 


口 RTEA AN V i o 


查看 源 代码 , 应 该 可 以 看 到 下 列 这 些 行 位 于 </footer> 标 签 和 </boqy> 标 签 之 间 ( 完 
整 的 URL 可 能 会 与 你 的 有 所 不 同 ): 


</footer> 

<script type-'text/javascript' 
src-'http://localhost:8888/bootstrappin- 
portfolio/assets/js/plugins.js'»«/script» 

<script type-'text/javascript' 
src-'http://localhost:8888/bootstrappin- 
portfolio/assets/js/main.js'»«/script» 

«/body» 

</html> 


测试 传送 带 ， 应 该 正常 运行 了 。 
测试 响应 式 导航 条 ,在 窗 屏 幕 下 也 应 该 可 以 折 友 并 出 现下 拉 按 钮 ， 而 且 单 击 按钮 可 以 
扩展 和 折 著 |! 

下 一 节 ， 我们 为 导航 条 和 页 脚 添加 Logo 图 片 。 






































3.15 “为 导航 条 和 页 脚 添加 Logo 图 片 


先 把 成 Logo 图 片 的 标记 放 到 navbar-brand 链接 里 面 。 相 应 的 标记 位 于 templates 文件 
夹 中 的 header-top-navbar.php 文件 内 。 


(1) 用 编辑 器 打开 templates 文件 夹 中 的 header-top-navbarphp 文件 。 
(2) 找到 下 列 元 素 : 


<a class="navbar-brand" 
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G) 删除 以 下 标签 ， 它 的 用 处 是 在 导航 条 品牌 链接 中 插入 站 点 名 称 : 


<?php bloginfo('name'); ?> 
(4) 在 刚刚 删除 上 一 行 的 位 置 ， 填 入 盛 放 Logo 的 标签 : 
«img src-"«?php echo get template directory uri(); ?>/assets/img/ 


logo.png" width-"120" alt-"Bootstrappin'"» 


y 别 忘 了 咱们 的 Logo 图 片 做 得 很 大 ， 因 为 想 适应 视网膜 屏 嘛 。 所 以 这 里 
Q 一 定 要 加 上 width 属性 ， 否 则 就 太 大 了 。 


(5) 保存 结 
(6) 刷新 页 面 ， 应 该 可 以 看 到 Logo 图 片 ， 如 下 图 所 示 : 





Booisiroppin Portfolio 








接 下 来 是 页 脚 。 

页 脚 中 的 社交 媒体 图 标 应 该 没 问 题 。Roots 主题 默认 的 版 权 信息 显示 在 这 些 图 标 下 方 。 为 
了 练习 起 见 ， 我 们 删除 这 个 版 权 信息 ， 然 后 把 站 点 的 Logo 放 到 社交 媒体 图 标 上 方 。 

为 此 ， 我 们 需要 编辑 页 脚 的 模板 文件 。 

(1) 在 编辑 器 中 打开 template 文件 夹 中 的 footer.php 文件 。 

(2) 打开 后 删除 下 列 代 码 ， 我 们 的 练习 文件 不 需要 声明 版 权 : 


<p>&copy; «?php echo date('Y'); ?> «?php bloginfo('name'); 
?></p> 


(3) 然后 在 动态 的 侧 边栏 上 面 插入 一 行 : 

[新 插入 的 行 ] 

«?php dynamic sidebar('sidebar-footer'); ?> 
(4) 添加 一 个 带 链 接 的 站 点 Logo: 


«p»«a href="<?php echo home url(); ?>/"><img src="<?php 
echo get template directory uri(); 
?»/assets/img/logo.png" width-"80" 
alt-"Bootstrappin'"»«/a»«/p» 





























M 
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这 里 是 把 WordPress 的 home. url 模板 标签 包含 在 一 个 段落 里 。 如 果 觉 得 不 合适 ， 你 
可 以 自己 换 成 其 他 标签 。 


(5) 保存 文件 ， 刷 新 浏览 器 ， 应 该 看 到 类 似 如 下 的 结 








Bootstrappin 





我 们 的 网 站 设计 至 此 基本 完成 了 一 一 但 是 别 忘 了 还 有 站 点 的 收藏 图 标 和 触摸 设备 图 标 啊 。 


3.16 ”添加 图 标 链接 


为 了 让 我 们 的 主题 能 够 跨 设 备 ， 还 需要 在 head.php 模板 文件 中 添加 到 favicon.ico 和 
apple-touch-icon-precomposed.png 文件 的 链接 。 


(1) 在 编辑 器 中 打开 templates 文件 夹 中 的 head.php 文件 。 













L templates 

it comment.php 
comments.php 
content-page.php 
content-single.php 
content.php 
entry-meta.php 
footer.php 


TEE [i [R7 [ 





p 









E 


header-top-navbar.php 
header.php 
page-header.php 
searchform.php 
sidebar.php 


CHICHIS 








(2) FH WordPress 的 PHP 函数 get_template_directory_uri () 取 得 路 径 的 前 半 部 分 ， 
然后 补 上 favicon.ico 和 apple-touch-icon-precomposed.png 文件 的 具体 路 径 : 


<!-- Icons --» 
«link rel-"shortcut icon" href-"«?php echo 
get template directory uri(); ?»/assets/ico/favicon.ico"» 
«link rel-"apple-touch-icon-precomposed" href-"«?php 
echo get template directory uri(); ?»/assets/ico/apple- 
touch-icon-precomposed.png"» 
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G) 保存 并 刷新 浏览 器 ， 应 该 可 以 看 到 收藏 图 标 出 现在 标签 页 的 标题 栏 上 。 
以 下 是 在 Chrome 浏览 右 中 看 到 的 图 标 : 





B Bootstrappin' 


(C | [5 localhost:8888/bootstrappin-portfolio/ 





最 后 ， 我 们 还 要 关注 两 个 细节 ， 以 满足 WordPress 主题 的 特殊 需求 。 


3.17 恢复 WordPress 特有 的 样式 


正 是 考虑 到 要 恢复 WordPress 特有 的 样式 , 所 以 我 们 之 前 才 把 Roots 的 资源 文件 夹 重 命名 
为 ”ROOTS ASSETS_ORIGINAL。 虽 然 我 们 的 主题 已 经 完整 了 ,但 Roots 中 却 包含 了 两 
组 重要 的 WordPress 样式 ， 还 必须 把 它们 请 回来 。 

首先 ， 在 Roots 的 css 文件 夹 中 ， 可 以 看 到 editor-style.css 文件 。 这 个 文件 用 于 改进 编辑 
器 的 使 用 体验 ， 我 们 要 把 它 复 制 到 我 们 主题 的 css 文件 夹 中 。( 读者 也 可 以 自己 创建 一 个 
类 似 的 文件 ， 使 其 与 自己 站 点 的 风格 一 致 。) 

其 次 ， 如 果 我 们 想 在 站 点 上 架 一 个 博客 ， 或 者 想 发 布 一 款 主题 ， 那 么 就 应 该 恢复 一 些 
WordPress 特有 的 样式 。 这 些 样式 Roots 都 放 到 了 less 文件 夹 下 的 app.less 文件 中 。 把 这 



























































个 文件 添加 到 自 定 义 的 LESS 文件 , 然后 重新 编译 到 main.css 文件 中 只 是 小 菜 一 碟 。 具体 
步骤 如 下 。 


(1) 在 编辑 器 中 打开 Roots 主题 less 文件 夹 下 的 app.less 文件 。 
(2) 在 另 一 个 编辑 器 窗口 中 ， 创 建 一 个 新 文件 ， 命 名 为 _wp.less 并 保存 到 我 们 自 定 义 的 
assets 文件 夹 下 的 less 文件 夹 下 ， 结 果 如 下 图 所 示 : 















| less 
] .main.less 
_Carousel.less 
" _footer.less 
] _navbar.less 
| _page-contents.less 
17 _variables.less 






> [ bootstrap 
> | font-awesome 





(3) 从 app.less 中 复制 如 下 代码 , 保存 到 _wp.less 中 ， 这 些 代码 针对 WordPress 为 图 片 生成 


的 类 : 
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aligncenter { display: block; margin: 0 auto; } 
alignleft { float: left; } 

alignright ( float: right; ) 

figure.alignnone ( margin-left: 0; margin-right: 0; } 


(4) 如 果 你 想 在 搭建 一 个 博客 , 那么 为 了 加 快 设 计 过 程 ， 还 应 该 把 下 面 这 些 针 对 文章 的 选 
择 符 复制 过 去 。 这 些 选 择 符 涵盖 了 Roots 模板 针对 博客 文章 的 元 素 和 类 名 : 














hentry header { ) 

hentry time ( } 

hentry .byline ( ) 
hentry .entry-content ( ) 
hentry footer { ) 


(5) 如 果 你 想 在 站 点 中 使 用 侧 边 栏 ， 也 要 提取 出 .siaebar 选择 符 。 

(6) 可 能 还 要 提取 Roots 默认 使 用 的 其 他 一 些 选 择 符 , ll.content,. .main,. .sidebar, 
等 等 。 

(T) 还 有 针对 画廊 短 码 的 样式 : 


/* Gallery Shortcode */ 
.gallery-row ( padding: 15px 0; } 


(8) 复制 完 需 要 保留 的 代码 之 后 ， 再 花 点 时 间 把 块 注 释 改 成 单行 注释 ， 以 便 它 们 不 会 被 编 
译 到 CSS 文件 中 。 
































4 Posts 

A — 07 OPES 

// WordPress Generated Classes 
h/"- 王 全 三 二 二 和 会 近 学 


(9) 保存 wp.less。 
(10) 关闭 app.less。 
(11) 现在 打开 _main.less， 添 加 一 行 代 码 导 人 _wp.less: 


// Other custom files 

Qimport " page-contents.less"; 
Qimport " footer.less"; 
Gimport " wp.less"; 


(12) 重新 编译 ”main.less 为 cssmain.css， 确 认 选 择 了 最 小 化 输出 ， 以 保证 最 佳 性 能 。 
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全 部 搞定 ! 我 们 不 仅 集 成 了 自己 的 设计 , 这 个 主题 还 可 以 随时 基于 WordPress 进行 二 次 
开发 。 


3.18 ”小结 


下 面 来 回顾 一 下 本 章 内 容 。 


口 本 章 以 杰出 的 Roots 主题 作为 我 们 WordPress 主题 的 起 点 。 
口 我 们 自 定义 了 如 下 模板 文件 ， 修 改 了 标记 结构 。 


m head.php: 用 于 添加 收藏 图 标 和 触摸 设备 图 标的 链接 。 
m header-top-navbar.php: 用 于 添加 Logo 图 片 。 
m footerphp: 用 于 添加 Logo 图 片 。 


口 我 们 新 建 了 如 下 自 定义 模板 文件 。 
m Dage-home.php， 基 于 template-custom.php。 





m base-page-home.php， 基 于 base.php。 





m COntent-home.php ， 基 于 content-page.php。 
口 对 于 复杂 的 主页 内 容 ， 我 们 利用 了 WordPress 的 自 定义 栏目 。 
口 为 了 放置 社交 媒体 图 标 ， 我 们 使 用 了 一 个 页 脚 部 件 。 
口 我 们 整合 了 自己 的 编译 资源 ， 包 括 LESS. CSS 和 JavaScript. 
口 为 整合 自 定义 的 设计 资源 , 我 们 编辑 了 Roots 的 scripts.php 文件 , 更 新 了 指向 我 们 CSS 
和 JavaScript 文件 的 链接 。 
口 我 们 还 从 Roots 中 提取 了 一 组 样式 ， 用 于 匹配 WordPress 站 点 的 细节 。 


你 能 跟着 一 步 一 步 做 完 ， 真 了 不 起 ! 
本 章 介 绍 的 流程 适用 于 将 任意 Bootstrap 设计 转化 为 WordPress 主题 。 
ET, 我 们 还 是 回 到 Bootstrap。 下 一 章 ， 我 们 讨论 如 何 设计 一 个 企业 网 站 。 
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企业 网 站 


上 一 章 把 个 人 作品 站 点 改造 成 了 WordPress 主题 。 本 章 ， 轮 到 我 们 充实 这 个 作品 站 点 ， 补 
充 一 些 项 目 ， 从 而 展示 我 们 的 能 力 了 。 换 名 话说， 我 们 要 构建 一 个 复杂 的 企业 主页 。 


请 大 家 花 点 时 间 看 一 看 下 面 几 家 成 功 企 业 的 网 站 : 
口 Zappos (http://zappos.com ) 








口 Amazon (http://amazon.com ) 
口 Adobe (http:/adobe.com ) 
C HP (http://hp.com ) 


尽管 这 些 网 站 各 有 特色 ， 但 共同 的 一 点 就 是 它们 都 很 复杂 。 

如 果 按照 区 域 划 分 ， 可 以 将 这 些 网 站 的 主页 分 成 三 部 分 。 

ORAR: 这 一 部 分 包含 Logo、 带 下 拉 菜 单 的 主导 航 、 二 级 和 实用 链接 导航 ， 以 及 登录 
和 注册 选项 。 

口 主 内 容 区 : 这 一 部 分 布局 复杂 ， 至 少 三 栏 。 

O 页 脚 区 : 包含 多 栏 链 接 和 信息 。 

我 们 必须 能 够 掌控 这 些 复杂 性 。 为 此 ， 需 要 充分 利用 Bootstrap 的 12 栏 响应 式 网 格 系统 。 
以 下 是 我 们 打算 要 构造 的 设计 在 中 、 宽 视 口 中 的 效果 : 
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db Log in or Register — 9 View Cart 


Bootstrappin 


















Don't Miss! 


Suspendisse et arcu felis, ac 
gravida turpis. Suspendisse potent 
Ut porta rhoncus ligula, sed fringila 
fel feugiat eget. in non purus quis 
elit iaculis tincidunt. Donec at 


Welcome! 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. in non purus 
Quis eiit iaculis tincidunt. Donec at uttrices est 





uitrices est 
Read more © 
Read more © 
Recent Updates Check it out 
Suspendisse et arcu felis, ac gravida turpis. s diano et arcu felia. ac 
Suspendisse potenti. Ut porta rhoncus ligula, gravida turpis. Suspendisse potent: 
sed fringila felis feugiat eget. In non purus Ut porta rhoncus ligula, sed fringilla 
Quis eiit iaculis tincidunt. Donec at ultrices est fois feugiat eget. In non purus quis 
elit iaculis tincidunt. Donec at 
Read more O uitrices est 
Featured Content 
Read more © 
Suspendisse et arcu felis, ac gravida turpis. And another thing 
Suspendisse potenti. Ut porta rhoncus ligula, Suapendisee et arcu felis, ac gravida turpis. Finally 
sed fringilla felis feugiat eget. Suspendisse potenti. Ut porta rhoncus ligula. Suspendisse ot arcu felis, ac 
sed fringila felis feugiat eget. In non purus gravida turpis. Suspendisse potenti 
quis elit laculis tincidunt. Donec at ultrices est. Ut porta rhoncus houia. sed fringila 
felis feugiat eget. In non purus quis 
Read mor © eit isas tincidunt. Donec at 
utnces est 


Read more O 





Other Da Jont you dare 
Alternative Oh go ahead 


Otherwso 


在 窗 视 口中 ， 页 面 会 相应 变化 ， 如 下 图 所 示 : 
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Featured Content 

Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, sed 
fringilla felis feugiat eget. 


Learn more © 


Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 
In non purus quis elit iaculis tincidunt. Donec at ultrices est. 








这 样 ， 我 们 需要 做 以 下 这 些 事 。 

(1) 以 第 2 章 的 个 人 作品 网 站 作为 起 点 。 

Q) 完成 复杂 的 页 头 区 ， 包 括 Logo、 导 航 以 及 右上 角 的 实用 导航 〈 桌 面 视 口 )。 
(3) 在 较 容 的 视 口 中 ,实用 导航 只 显示 为 图 标 ， 与 折 鳃 后 的 响应 式 导航 条 并 列 。 
(4) 要 实现 企业 风格 的 配色 方案 。 

(5) 调整 桌面 版 和 响应 式 导 航 条 。 

(6) 为 主 内 容 区 和 页 脚 区 设置 复杂 的 多 栏 布局 。 


先 做 最 核心 的 工作 吧 一 一 准备 项 目的 启动 文件 。 
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4.1 


准备 启动 文件 
与 本 书 中 的 其 他 项 目 一 样 ， 本 章 的 启动 文件 也 可 以 从 Packt Publishing 网 站 下 载 : 
http:/www.packtpub.com/support。 下 载 后 解压 缩 ， 找 到 文件 夹 04_Code_BEGIN 即 可 。 
这 些 文件 基本 上 源 自 第 2 章 ， 因 此 已 经 具备 了 以 下 重要 组 件 。 
口 Bootstrap LESS 和 JavaScript 文件 ， 分 别 位 于 下 列 文件 夹 : 

m less/bootstrap: Bootstrap 的 LESS 文件 

m js/bootstrap: Bootstrap 的 个 别 插件 

m js/plugins.js: Bootstrap 压缩 后 的 插件 
O HTMLS Boilerplate 及 下 列 文件 : 

m 基本 的 结构 化 标记 文件 index.html 


m js/vendor/modernizr-2.6.2.min.js 




















m js/vendor/query-1.10.2.min.js 




















O 保证 兼容 Internet Explorer 8 的 repond.js : 


m js/vendor/respond.]s 
Q Font Awesome 字体 图 标 ， 包 括 : 


m fonts 文件 夹 中 的 图 标 字体 
m less/font-awesome 文件 夹 中 的 LESS 文件 


除了 以 上 重要 的 资源 之 外 , 我 们 还 在 构造 第 2 音 的 网 站 时 添加 过 一 些 LESS 文件 , 可 以 在 NN 
less 文件 夹 中 找到 它们 。 


口 _main.less: 基于 bootstrap.less,， 导 入 了 位 于 less/bootstrap 中 的 Bootstrap 的 LESS XC 
件 、Font Awesome 字体 图 标 和 我 们 自 定义 的 LESS 文件 。 

口 _carouselless: 基于 Bootstrap 的 carousel.less, 自 定义 了 传送 带 的 内 边 距 、 背 景 和 指示 图 标 。 
口 _footer.less: 包含 Logo 及 社交 媒体 图 标的 布局 和 设计 样式 。 

口 _navbarless: 基于 iiis 的 navbar.less, 调整 了 .navpar-prand 类 的 样式 ， 以 使 导 
航 条 中 的 Logo 位 置 合 

口 page-contents.less: 其 的 样式 确保 了 每 一 栏 中 的 浮动 按钮 在 呈现 为 单 栏 的 情况 下 相 
互 清除 。 

口 _variables.less: 基于 Bootstrap 和 variables.less， 针 对 导航 条 和 传送 带 自 定义 了 灰 颜色 、 
新 增 了 变量 
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如 果 你 愿意 ， 也 可 以 把 全 新 的 Bootstrap 作为 本 章 练 习 的 起 点 。 只 要 把 
Font Awesome 图 标 换 成 Glyphicons 即 可 。 虽 然 这 样 就 没有 前 面 所 说 的 样 
式 了 ， 但 你 可 以 自己 随意 添加 和 调整 。 

在 本 章 提供 的 启动 文件 中 ,我 已 经 尽力 在 自 定 义 的 地 方 添加 了 单行 注 
释 ， 比 如 // edited 或 // added. 





接 下 来 , 我们 看 一 看 pndex.html 文件 提供 的 内 容 , 我 已 经 调整 了 这 个 页 面 。 在 浏览 器 中 打 
开 它 ， 应 该 看 到 如 下 界面 : 





Bootstroppin’ Ses- comno- 





See@ 


Featured Content 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. 


Accessohes « Men + 


Welcome! 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, 
sed fringilla fels feugiat eget. in non purus 
quis elit laculis tincidunt. Donec at ultrices est. 


Recent Updates Kies 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, 
sed tringilla felis feugiat eget. In non purus 
Quis eiit iaculis tincidunt. Donec at ultrices est. 


And another | feinen | acsi 
thing 

Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In non purus 

Quis eiit iaculis incidunt. Donec at ultrices est. 


All Departments ~ 


Don't Miss! 

Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In non purus 
quis eit iaculis tincidunt. Donec at ultrices est. 


esed 


Suspendisse et arcu felis, ac 

gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In 
non purus quis elit iaculis tincidunt. Donec at 


ultrices est 


Finally 

Suspendisse et arcu felis, ac 

gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In 
non purus quis elit iaculis tincidunt. Donec at 


ultrices est 
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下 面 说 明 一 下 相关 的 特性 。 

口 导航 条 很 复杂 ， 有 7 项 ， 每 一 项 都 有 下 拉 菜 单 。 

口 三 栏 中 的 第 一 栏 开头 是 一 个 传送 带 ， 后 面 是 一 个 标题 、 一 个 段落 和 一 个 按钮 。 

口 第 二 和 第 三 栏 同 样 都 包含 标题 和 段落 ， 以 及 “Read more ->” 按 钮 。 

口 页 脚 包含 Logo 和 社交 媒体 图 标 。 

我 们 必须 重新 组 织 第 2 章 项 目 文 件 中 的 元 素 。 传 送 带 已 经 变 小 了 ， 宽 度 由 包含 它 的 栏 限 
制 。 除 此 之 外 ， 标 记 没 有 本 质变 化 。 

相对 比较 难 一 点 的 地 方 是 这 里 使 用 了 一 个 JavaScript 插件 holderjs， 目 的 是 为 传送 带动 态 
生成 占 位 图 片 。 查 看 源 代 码 ， 就 会 发 现在 页 面 底部 plugins js 插件 之 前 ， 我 们 包含 了 这 个 
holder.js 脚本 : 
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«!-- Holder.js for project development only --» 
«script src-"js/vendor/holder.js"»«/script» 


最 终 的 站 点 中 是 不 使 用 占 位 图 片 的， 因此 单独 给 它 注释 出 来 很 有 必要 。 


加 载 了 holderjs 之 后 ， 就 可 以 方便 地 把 holderjs 作为 任意 图 片 的 来 源 。 然 后 使 用 伪 URL 
指定 大 小 、 颜 色 和 填充 文本 ， 比 如 : 


«img src-"holder.js/600x480/auto/vine/textmode:literal" alt-"Holder Image"> 


更 多 信息 可 以 参考 holderjs 的 文档 : https://github.com/imsky/holder. 





有 了 这 些 元 素 ， 以 及 Bootstrap 内 置 的 样式 和 行为 ,我们 的 起 点 就 非常 高 了 。 下 面 我 们 就 
来 实现 所 有 特性 。 


首先 ， 我 们 重新 定位 导航 条 ， 实 现 页 头 区 的 设计 。 


4.2 RAK 


下 面 我 们 就 从 上 到 下 ， 先 来 实现 复杂 的 页 头 区 ， 包 括 如 下 特性 。 
口 在 桌面 浏览 器 及 较 大 视 口 中 ， 让 站 点 Logo 显示 在 导航 条 之 上 。 
口 包含 菜单 项 的 导航 条 ， 每 个 菜单 项 又 都 包含 下 拉 菜 单 。 

口 实用 导航 区 。 

口 带 用 户 名 和 密码 字段 的 登录 表单 。 

口 注册 选项 。 

以 下 是 桌面 浏览 器 中 的 目标 结 














Bootstrappin 





罕 视 口中 的 目标 结果 如 下 : 





=  Dootstrappin ér 
我 们 先 从 放置 站 点 Logo 开始 。 


4.2.1 把 Logo 放 到 导航 条 上 方 


在 这 个 设计 方案 里 ， Logo 可 能 出 现在 两 个 地 方 ， 视 情况 而 定 : 
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口 在 桌面 和 宽屏 幕 中 ， 显 示 在 导航 条 上 方 ; 
口 在 平板 和 手机 屏幕 中 ， 显 示 在 响应 式 导 航 条 内 部 。 


利用 Bootstrap 的 响应 式 实用 类 ， 这 两 点 我 们 都 可 以 做 到 ! 方法 如 下 。 
(1) 在 编辑 器 中 打开 index.html. 
(2) 找到 导航 条 ， 复 制 navbar-brand 的 链接 与 图 片 : 


«a class-"navbar-brand" href-"index.html"»«img src= 
"img/logo.png" alt-"Bootstrappin'" width-"120"»«/a» 

















(3) 然后 粘贴 到 导航 条 上 方 , TE«header role="banner"> 标 签 和 <nav role- "navigation" 
class-"navbar navbar-default"> 标 签 之 间 。 

(4) 把 这 个 Logo 用 <div class="container">...</div> 包 装 起 来 ， 使 其 被 限制 在 
Bootstrap 居中 的 网 格 内 部 。 

(5) 编辑 Logo 的 链接 , 将 其 类 名 由 navbar-brand 改 为 banner-brand。 然后 把 图 片 宽 
度 改 为 180。 








Logo 图 片 其 实 很 大 ， 有 900px 宽 。 为 了 让 它 在 视网膜 屏 上 显示 清晰 , 我 
们 已 经 使 用 width 属性 (使 用 CSS 规则 也 行 ) 把 它 缩 小 到 了 120px 宽 ， 
以 便 提供 足够 的 像素 密度 。 


结果 代码 如 下 所 示 : 


«header role="banner"> 
«div class="container"> 
<a class="banner-brand" href="index.html"><img src="img/logo.png" alt= 
"Bootstrappin'" width="180"></a> 
«/div»«!-- /.container --> 
«nav role-"navigation" class-"navbar navbar-default"'» 


保存 修改 ， 然 后 在 浏览 器 中 刷新 页 面 。 应 该 在 导航 条 上 面 看 到 新 的 Logo. 











Bootsirappin 


Bootsirappin snoes- cioting- 





下 面 我 们 来 调整 Logo， 让 它 只 在 必要 的 时 候 显示 。 
在 _variables.less 中 ， 确 认 变 量 egriq-float-breakpoint 的 值 。 可 以 通过 搜索 找到 这 
个 变量 ，less/bootstrap/variables.less 文件 中 这 个 变量 的 默认 值 如 下 : 


// Point at which the navbar stops collapsing 
Ggrid-float-breakpoint: Gscreen-sm-min; 





nnnnnmnmmmnnnmnnmnrmnmnmrnmrnmrnmrmrmr http: //blog.si na. comcrn/ u 3283485963 


4.2 页 头 区 107 











这 个 变量 决定 了 导航 条 在 鹤 视 口中 折 受 ， 在 宽 视 口 中 展开 。 在 我 们 的 设计 中 ， 考 虑 到 导 
航 的 复杂 性 ， 需 要 在 接近 的 下 一 个 较 宽 的 断 点 折 受 导航 条 。 因 此 ， 需 要 把 变量 的 值 设置 
为 escreen-md-min。 如 果 你 使 用 的 是 04 Code BEGIN 中 的 文件 , 那么 这 个 变量 应 该 已 
经 就 这 么 设置 好 了 ( 如果 不 是 ， 那 就 照 下 面 这 样 改过 来 ): 


// Point at which the navbar stops collapsing 
Ggrid-float-breakpoint: Gscreen-md-min; 


设置 完 这 个 变量 后 ， 我 们 要 考虑 让 banner-brana 只 在 中 、 大 型 视 口 中 显示 ， 而 让 
navbar-brand 只 在 小 和 超 小 型 视 口中 显示 。Bootstrap 为 此 提供 了 一 组 啊 应 式 实用 类 ， 
具体 可 以 参考 在 线 文 档 : http://getbootstrap.com/css/#responsive-utilities o 

下 面 我 们 就 按照 需求 来 应 用 这 些 类 。 


(1) }E visible-md visible-1g 添加 到 banner-brand 类 后 面 : 





















































«a class-"banner-brand visible-md visible-lg" 
href-"index.html"»«img src-"img/logo.png" 
alt-"Bootstrappin'" width-"180"»«/a» 


(2) 把 visible-xs visible-sm 添加 到 mavbar-brand 类 后 面 : 


«a class-"navbar-brand visible-xs visible-sm" 
href-"index.html"»«img src-"img/logo.png" 
alt-"Bootstrappin'" width-"120"»«/a» 


保存 修改 ， 刷 新 网 页 。 在 中 、 大 型 视 口中 ， 只 会 显示 banner-brand 中 的 Logo: 





Bootstrappin 


Accessories ~ Men ~ Women ~ Kids ~ All Departments ~ 








zm 
E 


$ 


在 小 型 和 超 小 型 视 口 中 ， 只 会 显示 navbar-brand 中 的 Logo: 


Bootsiroppin | 


Bootstrap 太 棒 啦 ! 








要 是 你 觉得 弄 两 套 标 记 交 替 显 示 很 乱 ， 也 可 以 考虑 使 用 JavaScript 来 做 
、 这 个 事 。 
不 过 ， 目 前 这 种 做 法 的 好 处 恰恰 在 于 它 不 依赖 JavaScript。 而 且 它 也 不 
会 影响 页 面 加 载 时 间 ， 因 为 两 个 地 方 引用 同一 张 图 片 不 需要 发 送 新 请 
求 。 归 根 结 底 ， 现 在 这 种 做 法 很 可 靠 ， 也 很 合理 ， 当 然 更 容易 实现 。 
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4.2.2 


下 面 我 们 来 调整 导航 条 。 


调整 导航 条 
现在 的 导航 条 包含 7 项 ， 每 项 又 各 有 子 菜单 ， 体 现 了 一 个 大 型 复杂 网 站 的 需求 。 
其 中 下 拉 菜 单 的 标记 直接 取 自 Bootstrap 的 导航 条 文档 :http://getbootstrap.com/components/ 


#navbar。 

如 果 你 查看 结果 标记 ， 会 发 现 以 下 特殊 的 类 和 属性 : 
口 父 级 li 元 素 中 的 class="dropdown"; 

口 链接 中 的 class-"dropdown-toggle"; 


O 链接 中 的 attribute="data-toggle"; 
口子 菜单 ul 中 的 class=" dropdown-menu" vo 


以 下 是 结果 标记 : 


«li class="dropdown"> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shoes 
<b class="caret"></b></a> 
«ul class="dropdown-menu"> 
<li><a href="#">Action</a></1i> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></li> 

































































Sius 
«/li» 
另外 还 有 一 个 带 特 殊 类 的 特殊 标签 ， 用 于 显示 下 拉 菜 单 指示 图 标 : «b class-'caret'» 
</b>。( 创建 这 个 指示 图 标的 CSS 在 less/bootstrap/dropdowns.less 中 。) 





一 下 _main.less 中 导入 其 他 LESS 文件 的 代码 ， 确 保 导 入 了 bootstrap/ 
dropdowns.less。 此 外 还 应 该 检查 plugins.js， 确 保 其 中 包含 了 bootstrap- 


假如 你 使 用 的 不 是 本 章 的 启动 文件 (04 Code BEGIN )， 需 要 认真 检查 
Q 
dropdown.js 插件 。 





在 LESS, JavaScript 和 标记 就 位 的 情况 下 ， 导 航 条 及 其 下 拉 菜 单 应 该 像 下 面 屏幕 截图 中 
一 样 。( 注意 ，Bootstrap 的 所 有 下 拉 菜 单 都 要 通过 单 击 激活 。) 
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Shoes ~ Clothing ~ Accessories ~ Men ~ Women ~ Kids ~ All Departments ~ 


Action 
Another action 


Welcome! 

Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat 
eget. In non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 


Something else here 


Separated link 


One more separated link 








Recent Updates 


熟悉 了 标记 结构 ， 并 且 确认 菜单 工作 正常 之 后 ， 接 下 来 我 们 要 把 ATI Departments 菜单 挪 
到 导航 条 的 最 右 端 ， 让 它 与 其 他 菜单 项 保持 最 大 距离 。 


为 此 ， 需 要 把 相应 的 列表 项 骨 套 在 它 自己 的 无 序列 表 中 。 


(1) Æ All Departments 列表 项 之 前 ， 关 闭 ul class="nav" 这 个 ul 标签 ， 用 于 包含 之 前 
的 所 有 列表 项 。 


(2) 在 All Departments 列表 项 之 前 ， 再 新 建 一 个 ul 标签 ， 类 名 为 nav 和 navbar-nav。 
添加 了 这 个 开始 标签 后 ， 这 个 独立 的 列表 项 就 具备 了 标准 的 导航 菜单 结构 。 


(3) 除了 nav fll navbar-nav 类 之 外 ,再 添加 一 个 pull-right 类 ,这 是 Bootstrap 的 一 
个 实用 类 ， 用 于 把 元 素 浮动 到 右 侧 。 


以 下 代码 中 加 粗 的 部 分 是 新 添加 的 代码 ， 紧 随 其 后 的 是 原来 的 列表 项 和 链接 : 


«/ul» 
«ul class="nav navbar-nav pull-right"» 
«li class-"dropdown"» 
«a href="#" class-"dropdown-toggle" data-toggle-"dropdown"»Al1 
Departments «b class-"caret"»«/b»«/a» 


保存 修改 并 刷新 页 面 ， 应 该 可 以 看 到 All Departments 下 拉 荣 单 已 经 浮动 到 了 导航 条 的 最 
右 端 : 











Bootstrappin 


es 








一 切 顺 利 ! 下 面 来 添加 实用 导航 。 
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4.3 


添加 实用 导航 


我 们 的 设计 需要 提供 几 个 实用 的 导航 链接 ， 让 用 户 可 以 登录 、 注 册 和 查看 购物 车 。 
在 中 大 型 的 视 口中 ， 我 们 把 它们 放 到 页 头 区 的 右上 角 ， 如 下 图 所 示 : 


dh Log inor Register "S View Cart 














Bootstrappin’ 








在 较 小 的 屏幕 中 ， 则 把 对 应 的 链接 图 标 显 示 在 折 对 后 的 导航 条 的 最 右 端 ， 如 下 图 所 示 : 








) i : 

Knnicirmnnimn 
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FI 











说 做 就 做 。 
还 是 在 index.html 中 ， 我 们 要 在 页 头 区 添加 实用 导航 项 的 标记 ， 放 在 banner-brand 元 
素 后 面 。 以 下 是 完整 的 标记 ， 开 头 是 header 标签 ， 新 增 的 代码 加 粗 了 : 


«header role-"banner"'» 
«div class-"container"-» 

«a class-"banner-brand visible-md visible-1g" href= 
"index.html"»«img src-"img/logo.png" alt-"Bootstrappin'" 
width-"180"»«/a» 

«div class-"utility-nav"» 

«ul» 
<li><a href="#" title-"Login or Register"»«i class-"icon 
fa fa-user fa-lg"»«/i» Log In or Register«/a»«/li» 
<li><a href="#" title="View Cart"»«i class-"icon fa fa- 
shopping-cart fa-1g"»«/i» View Cart«/a»«/li» 


</ul> 
</div><!-- /.utility-nav --> 
</div><!-- /.container --> 


关于 以 上 标记 ， 还 要 说 明 两 点 。 

口 类 utility-nav 只 是 为 了 方便 使 用 ， 它 不 是 Bootstrap 特有 的 类 ， 也 没有 什么 样式 。 

口 这 里 已 经 通过 fa-user 和 fa-shopping-cart 类 添加 了 Font Awesome 的 用 户 和 购物 
车 图 标 ， 并 通过 fa-1g 类 把 它们 的 尺寸 增 大 了 33%。 关 于 增 大 Font Awesome 图 标的 
详细 说 明 ， 请 参见 它 的 文档 : http;//fontawesome.io/examples/Zlarger., 

保存 修改 并 刷新 页 面 ， 应 该 看 到 新 添加 的 utiLity-nav 出 现在 了 banner-brand Logo 

下 方 ， 如 下 图 所 示 : 
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e di Log In or Register 
e View Cart 














接 下 来 ， 我 们 对 布局 进行 相对 位 置 的 调整 ， 也 就 是 要 应 用 一 些 自 定义 的 样式 。 为 此 ， 要 

针对 页 头 区 新 建 一 个 文件 ， 步 又 如 下 。 

(1) 创建 一 个 新 文件 并 命名 为 bannerless， 保 存 到 less 文件 夹 中 ， 与 其 他 自 定 义 的 LESS 
文件 放 在 一 起 。 









£ less 

1 . main.less 
| _banner.less 
7 .carousel.less 
=- .footer.less 
= navbar.less 











(2) 把 _ bannerless 添加 到 ”main.less 的 导入 文件 列表 中 。 


// Other custom files 
QGimport " banner.less"; // added 


(3) 在 _banner.less F, 先 给 出 一 个 帮助 性 的 注释 。 把 .utility-nav 设置 为 绝对 定位 到 右 cem 
上 角 ， 而 且 是 在 header [role="banner"] 的 上 下 文中 应 用 样式 : 


//// Banner Area Styles 
// 
header[role-"banner"] ( 
.utility-nav ( 
position: absolute; 
top: 0; 
right: 0; 
} 
} 


(4) 下 面 我 们 要 调整 一 些 细节 

O Jj.banner-brand 类 添加 上 内 边 距 ， 以 增加 页 头 区 的 高 度 。 

口 将 页 头 区 container 的 定位 方式 设置 为 relative， 以 使 它 包含 绝对 定位 的 
utility-nav 元 素 。 


O 删除 无 序列 表 的 项 目 符号 。 
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口 向 左 浮动 列表 项 。 

O 将 链接 显示 为 inline-block 并 添加 内 边 距 。 
口 删除 悬 停 时 的 下 划 线 。 

完成 上 述 调整 的 样式 规则 如 下 : 


header[role-"banner"] { 
.banner-brand { 
padding-top: 40px; 








} 
> .container ( 
position: relative; 
H 
.utility-nav ( 
position: absolute; 





tops 0j 
right: 0; 
» ult( 
list-style: none; 
» li ( 
float: left; 
»atí 


display: inline-block; 

padding: 8px 12px; 

&:hover ( 
text-decoration: none; 











保存 修改 并 编译 。 把 浏览 器 窗口 调整 到 桌面 窗口 大 小 , 然后 刷新 。 应 该 能 看 到 ucility-nav 
元 素 出 现在 了 页 头 区 的 右上 角 位 置 。 




















Bootstrappin — 





这 些 调整 适合 中 大 型 的 视 口 。 下 面 我 们 针对 折 鳃 后 的 响应 式 导航 条 来 添加 样式 。 


4.4 ”调整 响应 式 导航 


在 小 屏幕 中 ， 导 航 条 折 释 后 utility-nav 会 出 现 问 题 。 最 明显 的 问题 是 它 会 消失 不 见 : 
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Bootstrappin' 





要 想 让 utility-nav 重见天日 ， 必 须 给 它 设 置 一 个 比 导 航 条 更 大 的 z-index, MATE 
_variables.less 中 被 设置 为 1000。 我 们 可 以 在 _ banner.less 中 ,把 .utility-nav 的 z-index 
设置 为 1999。 

.utility-nav ( 


z-index: 1999; 


于 是 ， 实 用 导航 就 会 出 现 了 : 


Bootstrappin & Log In or Register P View Cart 





接 下 来 的 问题 就 是 它 会 遮挡 navbar-toggle 按钮 。 为 此 ,我们 要 把 这 个 切换 按钮 转移 
到 导航 条 的 左 侧 ， 步 又 如 下 。 


(1) 在 编辑 器 中 打开 less/_navbarless。 


(2) 搜索 注释 // Navbar toggle， 编 辑 这 条 注释 正 下 方 的 .navbar-toggle 选择 符 ， 
把 浮动 值 由 right 改 为 left, 把 margin-right 改 为 margin-left: 


.navbar-toggle { 
position: relative; 
float: left; // edited 
margin-left: Gnavbar-padding-horizontal; // edited 


保存 并 编辑 上 面 的 修改 ， 可 以 看 到 切换 按钮 已 经 转移 到 了 折 受 后 导航 条 的 左 端 ， 如 下 图 
所 示 。 





Bootstrappin & Log In or Register — WF View Cart 
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现在 解决 过 分 拥挤 的 问题 ， 也 就 是 要 对 除 屏幕 阅读 器 之 外 的 其 他 设备 隐藏 链接 文本 。 在 
折 又 后 的 导航 条 中 ， 图 标本 身 就 是 以 传达 意图 了 ,何况 还 可 以 把 图 标 弄 得 更 大 一 些 。 


(1) 在 index.html 中 ， 用 span 标签 包围 utility-nav 中 每 个 链接 的 文本 : 


«li»«a href="#" title-"Login or Register"»«i class-"icon fa 
fa-user fa-lg"»«/i»«span»Log In or 
Register«/span»«/a»«/li» 

«li»«a href="#" title-"View Cart"»«i class-"icon fa 
fa-shopping-cart fa-lg"»«/i»«span» 

View Cart«/span»«/a»«/li» 


这 样 可 以 为 后 面 进一步 调整 样式 提供 抓 手 。 
(2) 在 _banner.less 中 添加 针对 这 些 span 标签 的 媒体 查询 。 在 使 用 LESS 的 情况 下 ， 可 以 
Ts dp E b py. 在 此 要 使 用 egridq-float-breakpoint 变量 , 把 max-width 
查询 设置 为 egridq-float-breakpoint - 1， 因 为 这 个 变量 的 值 意味 着 在 它 那么 宽 
时 ， 导 航 条 就 会 从 折 县 变 成 扩展 状态 。 在 这 个 媒体 查询 中 ， 使 用 实用 类 sr-only 作 
为 混入 ， 对 除 屏 幕 阅 读 器 之 外 的 所 有 设备 隐藏 文本 。( 人 参见 这 个 类 的 文档 : 
http://getbootstrap.com/css/#helper-classes-screen-readerso ) 代码 片段 如 下 : 









































.utility-nav { 
>a { 
Gmedia (max-width: (@grid-float-breakpoint - 1)) ( 
span { 
.Sr-only(); 
} 
} 


} 
} 


这 样 就 隐藏 了 span 标签 中 的 文本 ， 屏 幕 上 将 只 剩 图 标 ! 
(3) 再 增 大 图 标尺 寸 ， 并 在 垂直 方向 增加 一 些 行 高 。 同 样 还 在 这 个 媒体 查询 中 写 样 式 : 
@media (max-width: Ggrid-float-breakpoint - 1) ( 


span ( 
.sr-only(); 

















H 
.icon ( 
font-size: 2em; 
line-height: 1.2; 
} 
} 


保存 ， 编 译 ， 刷 新 。 应 该 看 到 下 图 所 示 的 结 
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4.5 


Bootstrappin 























再 放大 、 缩 小 浏览 露 窗口 ， 反 复 经 过 上 断 点 宽度 ， 看 看 整个 页 头 区 来 回 变 换 的 效果 是 不 是 
很 平滑 。 

就 我 而 言 ， 能 有 这 么 一 个 框架 让 我 如 此 高 效 地 实现 这 种 流畅 的 响应 式 界 面 ， 我 真 要 谢 天 
谢 地 了 。 

下 面 ， 我 们 要 调整 配色 。 





调整 配色 


我 们 网 站 现在 的 配色 是 标准 的 企业 网 站 颜色 : 蓝 、 红 、 灰 。 下 面 我 们 把 这 些 颜 色 放 到 变 

BH. 

(1) 在 编辑 器 中 打开 _variables.less， 从 一 开始 的 变量 开始 。 

(2) 先 看 一 下 目前 灰色 变量 覆盖 的 范围 。 如 果 大 家 以 04 Code BEGIN 中 的 文件 为 起 点 ， 
会 发 现 我 们 已 经 把 第 2 章 定义 的 变量 继承 过 来 了 。 这 些 变量 不 光 在 第 2 章 有 用 ， 现 在 
同样 可 以 派 上 用 场 。 















































// Grays 
[A TT TUI 
Ggray-darker: #222; // edited 
Ggray-dark: 4454545; // edited 
Ggray: #777; // edited 
Ggray-light: daeaeae; // edited 
Ggray-lighter: dccc; // edited 
Ggray-lightest: dededed; // edited 
Goff-white: #fafafa; // edited 

(3) 在 灰色 变量 下 方 ， 再 添加 品牌 色 。 修 改 @brand-primary， 新 增 红色 的 @brand- 
feature: 
@brand-primary: #3e7dbd; // edited blue 
Gbrand-feature: #c60004; // added new red 








(4) 下 面 调 整 链接 的 悬 停 颜色 ， 使 其 比 abrand-primary Hik (而 不 是 稍 深 )， 否 则 就 太 
KT. 


// Links 

Jose aei) irum irem eges eum 

Glink-color: QGbrand-primary; 
Glink-color-hover: lighten(Glink-color, 15%); 
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设置 好 这 些 颜 色 变量 后 ， 就 可 以 着 手 调整 导航 条 的 配色 了 。 
4.6 ”调整 折 又 后 的 导航 条 配色 


还 在 _variables.less 中 ， 搜 索 // Navbar， 在 这 里 可 以 看 到 导航 条 用 到 的 变量 。 这 里 指定 
的 大 多 数 标 准 值 既 对 折 又 后 的 响应 式 导 航 条 有 效 ， 也 对 宽屏 幕 下 扩展 的 导航 条 有 效 。 

我 们 希望 折 生 后 响应 式 导 航 条 的 背景 、 文 本 和 链接 颜色 与 默认 值 基 本 一 和 臻 ,但 在 中 大 型 
视 口中 变 成 蓝 色 背 景 、 浅 色 文 本 。 

为 此 要 调整 一 些 变量 的 默认 值 ， 然 后 再 创建 一 些 新 变量 ， 只 应 用 给 扩展 后 的 导航 条 。 


(1) 把 enavbar-height 的 值 减 小 为 44px， 然 后 把 前 面 设置 的 变量 应 用 到 合适 的 地 方 。 
再 把 anavbar-default-color 设置 为 atext-color, 把 @navbar-default-bg 设 
置 为 ewhite。 


// Basics of a navbar 



































Qnavbar-height: 44px; 
Qi: Gtext-color; 
Gnavbar-default-bg: #fff; 
(2) 向 下 找到 导航 条 链接 区 ， 调 整 颜色 让 链接 与 导航 条 文本 颜色 一 致 ， 并 给 活动 链接 添加 
一 点 背景 色 : 


// Navbar links 


QGnavbar-default-link-color: Gnavbar-default-color; 
Qnavbar-default-link-hover-color:  QGnavbar-default-color; 
Qnavbar-default-link-hover-bg: darken(Gnavbar-default-bg, 5%); 
Qnavbar-default-link-active-color: Gnavbar-default-color; 
QGnavbar-default-link-active-bg: Qnavbar-default-link-hover-bg; 





(3) 再 调整 navbar-toggle 的 样式 ， 删 除 边 框 和 背景 ， 调 深 导 航 条 : 


// Navbar toggle 


Gnavbar-default-toggle-hover-bg: transparent; 
Qnavbar-default-toggle-icon-bar-bg: Ggray; 
Gnavbar-default-toggle-border-color: transparent; 





保存 ， 编 译 ， 然 后 刷新 浏览 器 ， 在 罕 视 口中 应 该 看 到 下 图 所 示 的 效果 : 











—  Dootstrappin 名 下 





折 生 导航 条 还 有 两 个 地 方 要 调整 。 点 击 打开 下 拉 导 航 菜单 ， 会 看 到 浮动 到 右 侧 的 A 
Departments 链接 。 
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三 Bootstrappin’ ét 
Shoes ~ 
Clothing ~ 
Accessories ~ 
tni 
Women ~ 


Kids ~ 


All Departments ~ 








还 记得 我 们 把 pull-right 类 放 到 了 All Departments 菜单 项 中 了 吗 ? 那 就 是 为 了 让 它 浮 
动 到 扩展 后 的 导航 条 右 侧 。 但 此 时 此 地 ， 我 们 希望 它 还 在 左 侧 ， 怎 么 办 ?Bootstrap 专门 
有 一 个 类 就 是 为 了 这 个 目的 ! 


在 index.html 中 找到 包含 All Departments 的 标记 ,把 类 pul1l-right 改 为 navbar-right， 
如 下 所 示 : 
«ul class-"nav navbar-nav navbar-right"> 

«li class-"dropdown"» 


«a href="#" class-"dropdown-toggle" data-toggle-"dropdown"»All 
Departments «b class-"caret"»«/b»«/a» 


想 知道 背后 都 发 生 了 什么 ， 就 打开 _navbarless， 搜 索 .navbar-zight。 你 会 看 到 在 一 些 
注释 下 面 有 以 下 代码 : 
Gmedia (min-width: Ggrid-float-breakpoint) ( 


.navbar-left { .pull-left(); } 
.navbar-right ( .pull-right(); ) 























io geek ERR. Has HET JG SAU, qi booa F6 TH BET ERIT 
的 需要 。 在 应 用 新 的 navbar-right 类 之 后 ,保存 index.html ,刷新 ,会 发 现 All Departments 
在 折 又 的 导航 条 中 会 浮动 到 左 侧 ， 而 在 扩展 的 导航 条 中 仍然 会 浮动 到 右 侧 。 





Women ~ 


Kids ~ 


Le 


All Departments ~ 
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太 厉 害 了 ! 现在 ,我 们 来 调整 导航 条 中 下 拉 菜 单 的 行为 。 从 Bootstrap 3.0.2 起 ,下 拉 菜 
项 被 配置 为 与 折 礁 后 的 导航 条 同 宽 ， 但 前 提 是 导航 条 是 在 最 初 的 asscreen-sm-min 值 为 
@grid-float-breakpoint WIRI FRERE. RI FAKER EET o W 
试 , 可 以 把 浏览 器 窗口 拖 动 到 @screen-sm range (768 ~ 991px), 再 试 试 打 开 下 拉 菜 单 。 
你 会 看 到 下 面 的 结 












































— Bootstrappin 


Be 
w 


Shoes ~ 

Clothing ~ 

Action 

Another action 
Something else here 
Separated link 


One more separated link 


All Departments ~ 











实际 上 ， 只 要 调整 一 个 媒体 查询 ， 就 可 以 解决 这 个 问题 。 
(1) 打开 navbarlless 搜索 .open.dropdown-menu, 会 发 现 这 条 规则 被 符 套 在 一 个 媒体 查询 中 : 


@media (max-width: Gscreen-xs-max) ( 


// Dropdowns get custom display when collapsed 
.open.dropdown-menu { 


(2) 我 们 要 调整 这 个 媒体 查询 ， 让 它 的 max-width fiar T egrid-float-breakpoint. 
实际 上 ， 就 简单 地 把 这 个 变量 放 到 那儿 就 行 : 


@media (max-width: @grid-float-breakpoint) ( 





已 


保存 修改 ， 编 译文 件 ， 然 后 刷新 页 面 。 这 次 就 会 看 到 下 拉 菜 单 与 屏幕 一 样 宽 了 : 


Ji 





Bootstrappin &rv 
Shoes ~ 
Clothing ~ 


e 


Action 
Another action 


Something else here 
Separated link 


One more separated link 


Accessories ~ 











漂亮 。 接 下 来 轮 到 水 平 导 航 条 了 。 
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调整 水 平 导航 条 


在 中 大 型 屏幕 中 ， 导 航 条 水 平 排列 在 Logo 下 面 。 我 们 希望 此 时 的 导航 条 呈现 ebranq- 

primary 变量 中 设置 的 蓝 色 背景 。 为 此 ， 必 须要 反 转 链接 和 文本 的 颜色 ， 即 由 次 变 浅 。 

我 们 要 使 用 Bootstrap 的 inverted-navbar 变量 和 样式 。 

(1) fE variables.less 中 ， 搜 索 注 释 // Inverted navbar。 找 到 后 ， 会 发 现 一 些 与 默认 
导航 条 所 用 类 似 的 变量 。 我 们 就 要 通过 它们 来 给 扩展 后 的 导航 条 应 用 颜色 。 

(2) 按照 如 下 所 示 调 整 变量 : 


// Inverted navbar 








// 

// Reset inverted navbar basics 

@navbar-inverse-color: @gray-lightest; 
@navbar-inverse-bg: @brand-primary; 
@navbar-inverse-border: darken(Gnavbar-inverse-bg, 10%); 


// Inverted navbar links 


Qnavbar-inverse-link-color: QGnavbar-inverse-color; 
Gnavbar-inverse-link-hover-color: #fff; 
Gnavbar-inverse-link-hover-bg: darken(Gnavbar-inverse-bg, 5%); 
Gnavbar-inverse-link-active-color:Gnavbar-inverse-link-hover-color; 
Gnavbar-inverse-link-active-bg: darken(Gnavbar-inverse-bg, 10%); 


调整 好 这 些 变量 后 ， 只 要 把 它们 应 用 给 扩展 导航 即 可 。 为 此 得 写 几 行 自 定义 的 LESS fX 
码 。 考 虑 到 这 种 颜色 切换 属于 页 头 匹 配色 的 变化 , 所 以 我 们 就 把 代码 写 到 _ bannerless 中 。 


(3) 打开 bannerless 并 添加 一 个 新 的 带 广 释 的 区 块 : 


// Apply .navbar-inverse styles to the expanded navbar 
Gmedia (min-width: Ggrid-float-breakpoint) ( 
.navbar-default { 
.navbar-inverse(); 
} 
} 


这 个 媒体 查询 使 用 agridq-float- breakpoint 变量 确定 了 应 用 新 规则 的 最 小 视 口 
宽度 。 因 为 我 们 已 经 在 导航 条 中 添加 了 navbar-defauit 类 ， 所 以 可 以 直接 使 用 这 
个 类 作为 选择 符 。 混 入 .navbar-inverse() 则 把 在 navbarless 中 定义 的 样 
式 .navbar- inverse 应 用 给 了 这 个 媒体 查询 中 的 导航 条 。 


保存 以 上 修改 ， 编 译文 件 ， 刷 新 浏览 器 。 在 中 大 型 屏幕 中 ， 可 以 看 到 导航 条 的 蓝 色 背景 
和 浅 色 文本 了 。 



































Bootstrappin' 
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4.7 


此 时 此 刻 , 可 以 看 到 导航 条 两 端的 圆 角 。 我 们 得 把 这 些 样式 去 掉 。 为 此 , 打开 variables.less , 
搜索 变量 @navbar-border-radius， 然 后 将 其 值 设 置 为 0: 


@navbar-border-radius: 0; 
最 后 ， 我 们 把 文本 转换 为 大 写 形式 ， 稍 微缩 小 一 点 ， 再 加 粗 。 
在 _bannerless 中 ， 把 如 下 代码 添加 到 .navbar-inverse () 混 人 之 后 : 


Gmedia (min-width: Ggrid-float-breakpoint) ( 
.navbar-default { 
.navbar-inverse(); 
.navbar-nav > li >a { 
text-transform: uppercase; 
font-size: 82%; 
font-weight: bold; 
} 
} 
} 


这 样 就 得 到 了 我 们 想 要 的 结果 : 





Bootstrappin' 














我 们 的 页 头 和 导航 条 完工 了 ! 接 下 来 该 轮 到 页 面 的 主 内 容 区 了 。 


设计 复杂 的 响应 式 布局 


假设 我 们 在 刚刚 结束 的 客户 会 面 中 作出 了 一 个 承诺 ， 要 把 主页 内 容 分 成 三 层 ， 按 重要 程 
度 排序 。 


在 中 大 型 视 口中 ， 所 有 内 容 将 分 布 在 三 栏 中 ， 如 下 图 所 示 : 
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Welcome! Don't Miss! 
Suspendisse et arcu felis, ac 
Suspendisse et arcu felis, ac gravida turpis. potenit 
Suspendisse potenti. Ut porta rhoncus ligula, Ut porta ligula, sed fringi 
sed fringilla felis feugiat eget. In non purus fele f eget. In non purus quis 


Quis elit iaculis tincidunt. Donec at ultrices est. sit iaculis tincidunt. Donec at 


T 


Recent Updates Check It out 
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在 较 罕 的 视 口中 ， 这 些 栏 将 从 上 到 下 排 成 一 栏 : 
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而 在 平板 电脑 的 视 口 中 ， 并 排 的 只 有 两 栏 ， 第 三 栏 水 平 放 到 它们 下 面 ， 如 下 图 所 示 : 
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作为 起 点 ， 我 们 已 经 有 了 三 个 等 宽 栏 的 标记 。 下 面 就 来 看 一 下 这 些 标记 ， 考 虑 一 下 怎么 
实现 我 们 的 设计 意图 。 先 从 中 大 型 屏幕 的 三 栏 布局 开始 。 


4.7.1 ”调整 中 、 宽 布局 


当前 ， 在 中 宽 视 口中 ， 三 栏 是 等 宽 的 ， 而 且 字 体 大 小 、 按 钮 大 小 ， 还 有 颜色 都 一 样 。 结 
果 就 是 没有 层次 感 ， 如 下 图 所 示 : 
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要 实现 内 容 从 视觉 上 的 分 层 ， 可 以 调整 栏 宽 、 字 体 大 小 、 按 钮 大 小 ， 还 有 颜色 。 我 们 先 


从 调整 栏 宽 开 始 。 


(1) 在 index.html 中 ， 搜 索 包含 内 容 的 section 标签 : 


«section class-"content-primary col-sm-4"» 


这 里 的 类 col-sm-4 表示 当前 栏 是 父 元 素 宽度 的 三 分 之 一 ， 从 小 视 口 (764px) 及 以 


上 宽度 开始 。 


我 们 想 在 中 大 视 口 (992px 及 以 上 ) 内 保留 三 栏 ， 而 且 和 希望 第 一 栏 比 另 两 栏 宽 。 





(2) 把 co1-sm-4 修改 为 col-mda-5， 如 下 所 示 : 


«section class-"content-primary col-md-5"- 
这 样 就 把 栏 宽 设置 为 了 父 元 素 的 5/112， 并 且 从 中 型 视 口 开始 应 用 。 
(3) 再 搜索 到 后 面 两 栏 的 开始 section 标签 ,将 它们 的 类 分 别 改 为 col-md-4 和 


col-md-3: 


«gection class-"content-secondary col-md-4"'- 


«section class-"content-tertiary col-md-3"-» 


保存 ， 刷 新 ， 可 以 看 到 以 宽度 分 层 的 三 栏 : 
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rhoncus ligula, sed fringilla felis 

feugiat eget. In non purus quis elit 
iaculis tincidunt. Donec at ultrices 
est. 
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中 间 和 第 三 栏 的 按钮 并 没有 清除 。 下 一 步 就 来 调整 这 些 按钮 ， 还 有 字体 大 小 。 


4.7.2 ”调整 标题 、 字 体 大 小 和 按钮 
我 们 先 来 调整 标题 ， 以 便 它们 清除 自己 上 方 的 按钮 ， 目 前 这 些 按钮 都 浮动 到 了 右 侧 。 为 
此 ， 要 用 到 之 前 新 建 的 用 于 管理 页 面 内 容 细 节 的 文件 : _page-contents.less。 
以 下 是 调整 步 又 。 


(1) 在 _page-contents.less 中 ， 写 一 个 选择 符 选 择 笛 套 在 Bootstrap 的 分 栏 类 中 的 hl 到 n4。 
这 里 可 以 使 用 CSS2 的 属性 选择 符 , 同 时 只 针对 舰 套 在 类 以 col- 开 头 的 元 素 内 的 这 些 
标题 : 





S ff ”本章 后 面 还 要 设计 包含 自己 的 一 组 分 栏 的 页 脚 。 因此 , 这 里 还 要 确保 
SS 把 规则 说 套 在 针对 main 元 素 的 选择 符 内 。 


这 样 ， 就 可 以 选中 所 有 可 能 用 到 的 标题 标签 ， 以 便 清除 它们 的 浮动 ， 再 给 它们 添加 一 
些 内 边 距 。 
main { 

[class*="col_"] { 


h1, h2, h3, h4 ( 
clear: both; 
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padding-top: 20px; 
J 
) 
j 





这 样 标题 之 间 有 了 必要 的 分 隔 , 也 让 按钮 浮动 到 了 相应 位 置 。 但 这 样 也 在 第 二 和 第 三 


栏 上 方 增加 了 不 必要 的 上 内 边 距 。 


在 下 面 的 屏幕 截图 中 ， 下 方 箭头 指出 的 是 改进 ， 上 方 箭头 指出 的 是 内 边 距 造成 的 两 栏 


顶部 不 齐 的 问题 。 





不 齐 —» — 
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aravida turnis. Susnendisse 








(2) 下 面 来 删除 每 栏 最 顶部 标题 的 上 内 边 距 和 上 外 边 距 。 为 此 ， 





要 使 用 :first-child 选 


FIF, 垦 套 在 标题 选择 符 内 。 这 里 使 用 的 g 组 合 符 ， 用 于 选择 这 些 标题 的 第 一 个 实例 : 





hi1, h2, h3, hA ( 
&:first-child ( 
margin-top: 0; 
padding-top: 0; 
} 


} 
(3) 结果 就 是 去 掉 了 后 两 栏 项 部 多 余 的 内 外 边 距 : 
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potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In 
non purus quis eiit iaculis 
tincidunt. Donec at ultrices est. 





(4) 不 过 , 我 们 


只 想 在 小 或 较 大 视 口 中 删除 上 内 、 外 边 距 , 这 时 候 主页 呈现 为 多 栏 。 显 然 ， 


应 该 把 上 面 的 样式 蝶 套 在 与 相应 断 点 对 应 的 媒体 查询 中 。 这 个 断 点 就 是 从 单 栏 布 局 切 


换 到 多 栏 布局 的 断 点 。 
换 名 话说， 需要 把 上 面 的 样式 骨 套 在 小 及 更 大 的 视 口 中 : 
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4.7.3 


@media (min-width: Gscreen-sm-min) ( 
&:first-child ( 
margin-top: 0; 
padding-top: 0; 
H 
} 











通过 把 新 样式 藤 套 在 上 面 的 媒体 查询 中 ， 可 以 保留 单 栏 布 局 下 元 素 间 适 当 的 间距 ， 如 下 





图 所 示 : 
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完成 了 上 述 调整 ， 接 下 来 可 以 调整 按钮 和 字体 大 小 ， 从 而 反映 内 容 层次 了 。 下 面 就 来 增 


大 主 内 容 区 字体 和 按钮 大 小 ， 还 有 修改 颜色 。 
增 大 主 栏 
首先 来 增 大 主 栏 内 容 的 字体 大 小 。 


(1) 在 _variables.less 中 ， 搜 索 efont-size-1large 变量 ,将 其 值 修改 为 : 


ceil(@font-size-base * 1.15); 


(2) fE in. page-contents.less 中 ， 添 加 如 下 代码 ， 以 利用 上 一 步 中 设 定 的 字体 大 小 : 


.content-primary { 
font-size: Gfont-size-large; 


) 
保存 修改 ， 编 译文 件 ， 刷 新 浏览 咒 。 应 该 看 到 主 栏 文本 的 字体 增 大 了 ! 
接 下 来 调整 按钮 的 颜色 ， 这 要 用 到 红色 的 @brand-feature 变量 ， 


_variables.less 中 设 定 的 : 


@brand-feature: #c60004; 
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还 需要 利用 Bootstrap 在 mixins.less 中 提供 的 方便 的 混 人 。 和 希望 大 家 抽 点 时 间 看 看 这 个 文 
件 。 打 开 bootstrap/mixins.less， 搜 索 // Button， 可 以 看 到 以 下 面 代码 开头 的 混和 人 :， 
.button-variant (ecolor; Gbackground; Gborder) ( 

这 个 混入 的 作用 如 下 。 

O 指定 按钮 字体 、 背 景 和 边框 颜色 (分 别 对 应 于 混 人 接受 的 三 个 参数 )。 

口 生成 悬 停 、 焦 点 和 禁用 状态 的 按钮 ， 调 整 字体 颜色 、 背 景 颜色 和 边框 。 

如 果 你 有 兴趣 ， 还 可 以 看 一 看 Bootstrap 在 bootstrap/buttons.less 中 如 何 使 用 这 个 混入 ,就 
在 注释 // Alternate buttons 的 下 面 。 以 下 是 为 默认 主 按钮 生成 的 样式 : 


// Alternate buttons 

















.btn-default { 

.button-variant(Gbtn-default-color; @btn-default-bg; @btn-default-border); 
} 
.btn-primary { 

.button-variant(Gbtn-primary-color; @btn-primary-bg; @btn-primary-border); 


} 
尺 ebtn-dqefault- 和 ebtn-primary- 开 头 的 变量 是 在 variables.less 中 
一 定义 的 。 








按照 同样 的 模式 ， 只 需 简 单 四 步 即 可 生成 我 们 自己 的 自 定义 功能 按钮 。 
(1) 首先 ， 准备 一 组 新 的 按钮 变量 。 在 In _variables.less 中 ，// Buttons FH, 复制 三 


个 eabtn-primary- 变 量 将 -primary- 改 为 - feature-, 并 使 用 ebrandq- feature 


作为 背景 颜色 : 








@btn-feature-color: #fff; 
@btn-feature-bg: @brand-feature; 
@btn-feature-border: darken 


(@btn-feature-bg, 5%); 
(2) 然后 ， 创 建 一 个 文件 来 保存 自 定义 按钮 的 样式 。 新 建 _buttons-custom.less 并 根据 
bootstrap/buttons.less 中 的 混入 写 一 个 下 面 这 样 的 混入 调用 |: 


.btn-feature { 
.button-variant (@btn-feature-color; Gbtn-feature-bg; @btn-feature-border); 











} 
(3) 保存 文件 ， 并 将 其 添加 到 ”main.less 中 的 导入 列表 : 


@import "bootstrap/buttons.less"; 
@import " buttons-custom.less"; // added 


(4) 在 index.html F, 将 类 名 btn-primary 改 为 ptn-feature。 完 事 之 后 ,还 要 把 按钮 
变 大 一 些 ， 因 此 再 添加 类 btn-1g: 
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«a class-"btn btn-feature btn-lg pull-right" href="#"> 
Learn more 
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用 了 brand-feature 颜色 。 
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tincidunt. Donec at ultrices est. 


Read more © 








与 此 同时 , 第 二 (中) 栏 的 字体 大 小 和 按钮 颜色 正 是 我 们 想 要 的 。 接 下 来 需要 修改 的 是 
降低 第 二 们 内 容 的 重要 程度 


4.7.4 调整 第 三 栏 
对 第 三 栏 要 做 的 很 简单 ， 就 是 缩小 字体 大 小 ， 同 时 让 按钮 不 那么 突出 。 
(1) 首先 调整 字体 大 小 。 在 _variables.less 中 ， 调 整 efont-size-smal1l 变量 : 


@font-size-small: ceil(@font-size-base * 0.90); 


(Q2) 接 下 来 把 下 面 这 行 添加 到 page-contents.less 中 : 


.content-tertiary { 
font-size: Gfont-size-small; 


) 
G) 保存 ， 编 译 ， 刷 新 ， 字 号 变 小 了 。 
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(4) 接 下 在 , 要 编辑 index.html 中 的 按钮 类 , JE btn-primary 改 为 btn-default， 并 使 
用 btn-xs 减 小 其 尺寸 : 


«a class-"btn btn-default btn-xs pull-right" href="#">Read more ... 
这 样 就 减 小 了 按钮 并 把 背景 变 成 了 白色 。 


(5) 再 把 按钮 的 背景 颜色 改 为 浅 灰 色 ， 同 时 调整 字体 颜色 和 边框 。 在 _variables.less "P, 像 
下 面 这 样 调整 三 个 ebtn-default- 变 量 的 值 : 


@btn-default-color: Ggray; 
Gbtn-default-bg: Ggray-lightest; 
Gbtn-default-border: darken 


(Gbtn-default-bg, 52); 
保存 修改 ， 编 译文 件 ， 刷 新 浏览 器 。 
现在 页 面 的 层次 已 经 很 清晰 了 ， 从 左 到 右 依 次 是 主 内 容 、 次 内 容 和 第 三 栏 。 





Welcome! Don't Miss! 


Suspendisse et arcu felis, ac gravida turpis. epp aha ce at 
Suspendisse potenti. Ut porta rhoncus ligula, vestra ERE rac 
sed fringilla felis feugiat eget. In non purus s 


- felis feugiat eget. In non purus quis 
quis elit iaculis tincidunt. Donec at ultrices est. elit iaculis tincidunt. Donec at 


est. 
pm 一 





Read more O 
Recent Updates Check it out 
Suspendisse et arcu felis, ac gravida turpis. Suependiese et arcu felis, ac 
Suspendisse potenti. Ut porta rhoncus ligula, gravida turpis. Suspendisse potenti. 
eocc sed fringilla felis feugiat eget. In non purus Ut porta rhoncus ligula, sed fringilla 
Quis elit iaculis tincidunt. Donec at ultrices est. felis feugiat eget. In non purus quis 
elit iaculis tincidunt. Donec at 
Read more O ultrices est. 
Featured Content LJ 
Read more O 
Suspendisse et arcu felis, ac gravida turpis. And another thing 


Suspendisse potenti. Ut porta rhoncus ligula, s ne et rou MN, ab turpis. Finally 
sed fringilla felis feugiat eget. Suspendisse potenti. Ut porta rhoncus ligula, Suspendisse et arcu felis, ac 


sed fringilla felis feugiat eget. In non purus gravida turpis. Suspendisse potenti. 
quis elit iaculis tincidunt. Donec at ultrices est. Ut porta rhoncus ligula, sed fringilla 


felis feugiat eget. In non purus quis 
MI us 
est. 


Read more O 








再 看 看 我 们 的 设计 在 小 屏幕 单 栏 布局 时 的 样子 : 
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ge 
n 


=  Dootstrappin 





Featured Content 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. 
Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 


Learn more O 


Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Read more © 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Read more © 


And another thing 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta 
rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis 
tincidunt. Donec at ultrices est. 


Read more © 


Don't Miss! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus 
ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 


Read more © 


Check it out 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus 
ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 


Read more © 


Finally 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus 
ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at 
ultrices est. 


Read more © 
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在 窗 视 口中 ,三 栏 布 局 变 成 了 垂直 排列 的 一 栏 ， 主 内 容 在 上 ， 然 后 是 次 内 容 和 第 三 栏 。 
那么 剩 下 所 要 做 的 ， 就 是 对 设计 精 雕 细 琢 ， 以 便 让 它 在 不 同 设 备 和 视 口 中 体验 更 佳 。 





4.7.5 针对 多 个 视 口 进行 微调 


无 论 在 什么 视 口 中 ,通常 都 应 该 在 页 面 中 提供 一 些 留 白 。 为 外 ， 每 个 区 块 的 边框 最 好 也 
有 所 标示 。 


(1) 首先 ， 在 内 容 上 下 各 添加 一 些 内 边 距 。 给 main 元 素 添加 一 些 上 内 边 距 ， 这 个 内 边 距 
适用 于 所 有 视 口 ， 所 以 不 必 使 用 媒体 查询 : 


main ( 
padding-top: 20px; 
padding-bottom: 40px; 
} 


Q) 然后 ,设置 分 栏 在 单 栏 布局 时 清除 上 方 的 浮动 元 素 。 如 果 不 设置 , 第 二 和 第 三 栏 可 能 
会 覆盖 紧 上 方 的 按钮 。 这 些 样式 要 写 在 媒体 查询 中 ， 以 便 限 制 它 只 应 用 到 罕 视 口 : 


//Make columns clear floats in narrow viewport single-column layout 
Gmedia (max-width: Gscreen-sm-min) ( 
[class*-s"col-"] { 
clear: both; 
} 


就 这 样 了 ， 主 内 容 区 收工 。 最 后 是 复杂 的 页 脚 。 
























































4.8 复杂 的 页 脚 


接 下 来 我 们 要 实现 一 个 复杂 的 多 用 途 的 页 脚 ， 页 脚 包括 : 指向 网 站 三 个 重要 栏目 的 三 组 
HEIZ, About Us 文本 、 社 交 媒 体 图 标 ， 还 有 Logo。 








4.8.14 准备 标记 

我 们 先 从 准备 标记 着 手 。 页 脚 的 目的 是 对 用 户 尽 可 能 有 用 , 其 标记 可 以 按 如 下 步骤 来 准备 。 

(1) 用 编辑 器 打开 项 目 文件 夹 04_Code BEGIN 中 的 footer-content.html， 复 制 其 中 的 全 部 
内 容 。 

(2) 再 回 到 index.html , 找到 粘贴 它 的 位 置 。. 这 个 位 置 就 在 footer role="contentinfo" 
中 ,位 于 div class="container" 后 面 ,ul class="social" 前 面 。 (我 已 经 在 
页 脚 的 位 置 放 了 注释 。) 

(3) 粘贴 内 容 之 前 ， 我 们 再 准备 一 下 利用 Bootstrap 的 网 格 系统 。 为 此 ， 像 下 面 这 样 把 页 
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脚 区 包含 在 div class-"row"Hh: 


«footer role-"contentinfo"» 
«div class-"container"» 
«div class="row"> 
«1-- INSERT ADDITIONAL FOOTER CONTENT HERE --» 
«/div»«!-- /.row --» 
«ul class-"social"'» 


(4) 下 面 把 内 容 粘贴 到 位 。 

(5) 接 下 来 把 三 组 链接 及 各 自 的 标题 包含 在 类 为 col-md-2 的 aiv 中 。 这 样 就 保证 在 中 
大 视 口 中 每 一 组 链接 的 宽度 是 父 元 素 总 宽度 的 六 分 之 一 。 加 在 一 块 ,三 组 链接 占 视 口 
宽度 的 一 半 。 


«div class-"col-md-2"» 
«h3»Categories«/h3» 


(6) 继续 把 这 一 行内 容 做 完 ,把 About Us 标题 及 其 段落 包含 在 一 个 类 为 co1-mqa-6 的 div 
中 ， 这 样 它 就 占据 了 剩 下 的 一 半 宽 度 。 


«div class="about col-md-6"» 
«h3»About Us«/h3» 


























C) 保存 ， 刷 新 ， 检 查 结果 。 
在 980px 及 更 大 的 视 口 中 ， 页 脚 中 的 栏 如 下 所 示 : 





Categories Styles Other About Us 


sum dolor sit amet, consectetur adipiscing elit. Suspendisse 






































这 是 中 大 型 视 口 中 的 布局 。 在 超 小 的 屏幕 中 ,呈现 出 的 则 是 单 栏 布局 。 但 对 于 768px 到 
980px 之 间 的 平板 电脑 ， 我 们 的 布局 还 是 需要 调整 一 下 。 开 始 吧 。 























4.8.2 ”调整 布局 适应 平板 


测试 一 下 视 口 在 768px 到 980px 之 间 时 的 布局 。Bootstrap 把 这 个 区 间 界 定 为 小 断 点 ， 对 
应 变量 @screen-sm 和 col-sm- 网 格 类 。 在 这 个 宽度 内 , 单 栏 布局 会 导致 不 必要 的 空白 ， 
如 下 图 所 示 : 
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Categories 


Shoes 
Clothing 
Accessories 
Men 
Women 
Kids 


Pets RU 1 
Styles A 
e Athletic 
e Casual T 
* Dress 不 必要 的 空白 


Everyday 
Other Days 


Alternative 
Otherwise 好 i x 
Other 


e Link 

e Another link 

e Link again 

e Try this 

e Don't you dare 
e Oh go ahead 


About Us 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat 
volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. 
Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin 
metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. 








— cm 


要 改进 这 个 布局 ， 可 以 让 三 组 链接 浮动 起 来 。 使 用 Bootstrap 的 co1-sm-2$ co1-sm-4, 
可 以 将 每 一 栏 设置 为 三 分 之 一 宽 ， 使 用 ol -sm-12 将 About Us 设置 为 全 宽 : 


«div class-"col-sm-4 col-md-2"» 











«div class-"col-sm-4 col-md-2"» 
«div class-"col-sm-4 col-md-2"» 


«div class-"about col-sm-12 col-md-6"» 


保存 并 在 小 视 口 中 测试 一 下 ， 应 该 能 看 到 下 图 所 示 的 结果 : 
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4.8.3 





Categories Styles 


Shoes e Athletic 





Accessories 


Women 
Kids 


Pets 


About Us 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse euismod congue bibendum. Aliquam erat 
volutpat. Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, nec ultricies metus gravida egestas. 
Duis congue viverra arcu, ac aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer et sollicitudin 
metus. Vivamus at nisi turpis. Phasellus vel tellus id felis cursus hendrerit. 





* 
. 
. 
e Men 
* 
. 
. 

















改进 很 多 啊 ! 不 过 离 完成 还 远 着 呢 。 尝 试 单 击 上 方 三 栏 中 的 链接 ， 慌 怕 点 击 不 了 。 检 查 
元 素 会 发 现 包含 About Us 栏 的 aiv 元 素 并 没有 清除 上 方 的 浮动 栏 。 虽 然 About Us 标题 
及 文本 会 出 现在 三 个 浮动 栏 下 方 ， 但 那个 aiv 元 素 却 仍然 覆盖 在 三 栏 内 容 上 面 。 








针对 性 地 清除 
在 Bootstrap 标准 的 布局 方案 中 ， ， row 的 div 元 素 清除 上 方 的 浮动 栏 。 但 
我 们 在 此 要 使 用 另 一 个 方案 ， 因 为 我 们 只 希望 这 个 内 容 块 在 特定 的 断 点 范围 清除 浮动 。 








为 此 ,可 以 在 LESS 文件 中 写 一些 自 定义 的 样式 .不 过 ,也 可 以 直接 在 标记 中 使 用 Bootstrap 
的 响应 式 实用 类 提供 的 针对 性 的 clearfix。 因为 我 们 已 经 在 标记 中 指定 了 网 格 类 , 那 就 
干脆 使 用 第 二 个 方案 

关于 我 们 使 用 的 这 个 方案 ， 大 家 可 以 参考 Bootstrap 的 文档 ， 地 址 在 : http://getbootstrap. 
com/css/#grid-responsive-resets。 如 此 一 来 ， 就 要 创建 一 个 类 为 clearfix 的 div， 并 添 
加 一 个 Bootstrap 的 响应 式 实 用 类 , 使 其 只 在 小 屏幕 中 可 见 。 就 把 这 个 div 放 到 About Us 
栏 的 前 面 吧 : 


«div class-"clearfix visible-sm"></div> 
«div class-"about col-sm-12 col-md-6"» 




















这 个 clearfix 类 会 强制 当前 元 素 清除 上 方 的 浮动 。 而 visible-sm 类 则 控制 这 个 div 
仅 在 小 屏幕 ， 也 就 是 我 们 指定 的 断 点 范围 内 可 见 。 在 其 他 断 点 区 间 ， 这 个 div 元 素 就 像 
不 存在 一 样 。 
保存 以 上 修改 ， 刷 新 浏览 器 。 这 次 就 会 看 到 About Us 栏 清除 了 它 上 方 的 浮动 ， 而 链接 也 
可 以 点 击 了 。 


大 功 告 成 。 最 后 再 稍微 修整 几 处 。 























nnnnnmnmmmnnnmnnmnmnmrnmrnmrmrmrmr http: //blog.si na. comcrn/ u 3283485963 





4.8.4 


修整 细节 

对 于 页 脚 ， 我 们 还 想 再 修整 几 个 地 方 ， 包 括 : 

O 修整 三 组 链接 的 外 观 ; 

o 调整 内 外 边 距 ; 

口 反 转 配色 方案 ， 与 导航 条 保持 一 致 。 

要 完成 以 上 工作 ， 得 写 一 些 自 定义 的 样式 。 我 们 遵照 层 琶 原理 ， 先 写 一 些 针对 页 脚 的 通 

用 规则 ， 然 后 再 过 渡 到 特殊 规则 。 

(1) 在 编辑 器 中 打开 footer.less 以 添加 针对 页 脚 的 自 定义 样式 。 
在 这 个 文件 里 ， 可 以 看 到 第 2 章 中 一 些 样 式 的 修改 版 本 。 包 括 给 页 脚 添 加 的 内 边 距 ， 
以 及 针对 社交 媒体 图 标 ， 还 有 页 脚 中 Logo 的 样式 规则 。 

(2) 现在 开始 添加 针对 复杂 页 脚 的 样式 。 首 先 ， 缩 小 页 脚 字体 大 小 ， 反 转 配色 与 导航 条 对 
应 一 一 蓝 色 背景 , 浅 色 文本 。 我 们 先 设置 成 这 样 的 颜色 , 然后 再 把 它们 稍微 调 瞳 一 点 。 
为 此 ， 就 要 使 用 _variables.less 中 适当 的 变量 , 包括 @font-size-small、@navbar- 


inverse-bg 和 enavbar-inverse-color: 






































footer[role-"contentinfo"] ( 
padding-top: 24px; 
padding-bottom: 24px; 
font-size: Gfont-size-small; 
background-color: darken(Gnavbar-inverse-bg, 18*); 
color: darken(Gnavbar-inverse-color, 18%); 


a 这 里 及 后 面 的 规则 ， 都 要 放 到 footer[role="contentinfo"] 选 择 
符 下 。 


(3) 接 下 来 调整 链接 和 按钮 ， 以 适应 新 的 配色 。 同 样 要 把 规则 放 在 footer[role= 
"contentinfo"] 选 择 符 下 : 


aí 
color: Q8navbar-inverse-color; 
&:focus, 
&:hover, 
&:active { 
color: Gnavbar-inverse-link-hover-color; 
} 
} 
.btn-default { 
color: darken(Gnavbar-inverse-bg, 18$) !important; 


} 
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(4) 下 面 是 四 个 n3 标题 ， 调 整 它们 的 字号 ， 去 掉 下 外 边 距 ， 并 把 文本 转换 成 大 写 : 
h3 ( 
font-size: 120$; 
margin-bottom: 4px; 


text-transform: uppercase; 


} 


(5) 然后 ， 表 去掉 链接 列表 前 的 项 目 符号 ， 调 整 它们 的 内 外 边 距 : 


ul { 
list-style: none; 
padding: 0; 


margin: 0; 


} 
> 在 这 个 设计 中 ， 这 里 规则 针对 的 是 站 点 页 脚 中 的 所 有 无 序列 表 。 如 果 你 自 
Q 己 网 站 中 包含 其 他 无 序列 表 , 可 能 要 考虑 添加 特定 的 类 ,比如 footer-nav。 





(6) 最 后 ， 调 整 社交 媒体 图 标 。 就 是 添加 一 些 上 内 边 距 ， 调 整 一 下 颜色 ， 以 便 与 新 配色 方 
案 协 调 一 致 。 因 为 图 标 使 用 的 是 Font Awesome 字体 ， 所 以 只 要 调整 颜色 和 背景 颜色 
的 值 即 可 : 


ul.social ( 





padding: 24px 0 0; 
> li í 
»atí 
backupcundc5ofors darken(Gnavbar-inverse-bg, 27%); 
color: darken(Gnavbar-inverse-color, 18*); 
onus { 


background-color: darken(Gnavbar-inverse-bg, 32*); 
color: Gnavbar-inverse-link-hover-color; 
H 
} 
H 
} 




















就 这 样 了 。 保存， 编译 ， 刷新， 好 好 欣赏 吧 ! 以 下 是 页 脚 在 中 大 型 屏幕 中 的 结果 : 
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CATEGORIES OTHER ABOUT US 
Link e T 


Another link 
Link again 

Try this 

Don't you dare 


Oh go ahead 





在 小 屏幕 中 的 效果 如 下 : 


CATEGORIES OTHER 
Shoes Link 
Clothing Another link 
Accessories Link again 
Try this 

Other Days Don't you dare 

Alternative Oh go ahead 
Pets Otherwise 


Lorem ipsum dolor e etur adipiscing 
Js pharetra ullamcorper massa, nec ultricies metus gr 
semper vestibulum dapibus. Integer et sollicit 


hendrerit 





在 超 小 屏幕 中 的 效果 如 下 : 
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CATEGORIES 
Shoes 

Clothing 
Accessories 
Men 

Women 

Kids 

Pets 


STYLES 
Athletic 
Casual 
Dress 
Everyday 
Other Days 
Alternative 
Otherwise 


OTHER 

Link 

Another link 
Link again 

Try this 

Don't you dare 


Oh go ahead 


ABOUT US 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Suspendisse euismod congue bibendum. Aliquam erat volutpat. 
Phasellus eget justo lacus. Vivamus pharetra ullamcorper massa, 
nec ultricies metus gravida egestas. Duis congue viverra arcu, ac 
aliquet turpis rutrum a. Donec semper vestibulum dapibus. Integer 
et sollicitudin metus. Vivamus at nisi turpis. Phasellus vel tellus id 


felis cursus hendrerit. 
Learn more © 





不 错 嘛 ! 我 们 的 页 脚 其 实 挺 复杂 的 ， 内 容 多 ， 又 适 配 了 超 小 、 小 、 中 、 大 型 视 口 。 
小 结 


通过 本 章 的 项 目 ， 我 们 又 掌握 了 一 些 利 用 Bootstrap 的 新 技术 。 可 以 简单 总 结 如 下 。 


a 为 复杂 的 响应 式 导航 条 添加 样式 , 使 其 在 中 大 视 口 中 出 现在 Logo 下 方 ,而 在 小 屏幕 中 
又 能 折 全 起 来 。 

Q 构建 了 自 定义 的 响应 式 实用 导航 条 , 文本 和 图 标 都 能 创造 性 地 适应 较 大 和 较 小 的 屏幕 。 
Q 为 页 面 的 主 内 容 设计 了 响应 式 布局 ,使 三 栏 内 容 主 次 分 明 。 

Q 构建 了 一 个 复杂 的 页 脚 ， 有 效 地 组 织 了 多 个 链接 块 ， 还 有 跨 视 口 的 文本 段落 。 

口 以 导航 条 配色 为 基础 增强 了 页 脚 的 配色 。 


WE! 下 一 章 , 我 们 将 以 上 述 技术 为 依托 ， 为 这 个 网 站 的 电子 商务 模块 设计 一 个 产品 页 面 。 
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构建 了 公司 网 站 之 后 ， 接 下 来 就 可 考虑 设计 一 个 在 线 商店 了 。 

本 章 的 设计 以 上 一 章 的 设计 为 基础 ， 只 是 添加 了 一 个 包含 如 下 元 素 的 新 页 面 : 

口 包 含 商品 小 图 、 标 题 和 说 明 的 产品 网 格 ; 

口 位 于 左 侧 的 边栏 ， 用 于 按 类 别 、 品 牌 等 筛选 商品 ; 

口 方便 用 户 导 航 的 面包 恬 和 分 页 链接 。 

大 家 可 以 先 看 一 看 Zappos ( http://www.zappos.com ) fll Amazon ( http://www.amazon.com ) 
的 网 站 ， 搜 索 或 者 浏览 一 下 其 中 的 商品 。 本 章 所 要 创建 的 页 面 ， 就 包含 与 之 类 似 的 商品 
网 格 。 


完成 后 的 设计 在 大 、 中 、 小 屏幕 中 的 效果 应 该 如 下 图 所 示 : 
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Bootstrappin’ 


SHOES - CLOTHING - 


Home . Parent Category 


Narrow your 
selection 


Clearance Sale 


View clearance items 


Categories 


Option 1 Option 2 
Option 3 Option 4 
Option 5 Option 6 
Option 7 2 Option 8 
Option 8 Option 10 
Brands 
Option 1 Option 2 
Option 3 Opton 4 
Option 5 Option 6 
Option 7 Option 8 
Option 8 Option 10 


Another Filter 


J Option 1 J Option 2 





ACCESSORIES - 





Product Category Name . 


Product Title 

xt describes the above 

a little not too much but just 
enough or maybe a littie more 








View this product O 


Exceptional Product Title 
This text describes the above 
product a little not too much but just 
enough 





View this product O 


& Log In or Register 


Longer Product Title 
This text describes the above 
product a litte not too much 





View this product O 


Even Longer Product Title 
This text describes the above 

uct a littie not too much but just 
h -- or maybe we'll go on 

ger on this one 









product just really deserves it! 


View this product O 


在 超 小 屏幕 上 ， 我 们 希望 页 面 的 布局 变 成 如 下 所 示 : 


Y View Cart 


ALL DEPARTMENTS - 


Even Longer Product Titie 
This text describes the above 
product a little not too much but just 
enough -- or maybe we'll go on 
even longer on this one just 
because it's tun and, well, this 
product just really deserves it! 


View this product O 


Product Title 

This text describes the above 
product a little not too much but just 
enough or maybe a ittie more 


View this product © 
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== E o 

=  Dootstrappin $ 
Home / Parent Category 
Product Category 
Name 
Narrow your selection [3 
Product Title Longer Product Title 
This text describes the above This text describes the above 
product a little not too much product a little not too much 
but just enough or maybe a 
little more View this product O 

View this product O 








Bootstrap 为 完成 本 章 的 设计 提供 了 很 好 起 点 ， 在 此 基础 上 ， 我 们 要 使 用 LESS 完成 调整 
工作 。 


商品 页 的 标记 


本 章 的 练习 文件 可 以 在 文件 夹 05_Code BEGIN 中 找到 。 这 个 项 目 直 接 以 第 4 章 的 企业 网 5 
站 为 基础 ， 如 果 有 项 目 文 件 让 你 不 理解 ， 请 参考 第 4 章 。 








Q 本 书 练习 文件 可 以 在 这 里 下 载 : http://packtpub.com/support。 








对 本 章 而 言 ， 只 有 一 个 文件 是 新 的 ， 那 就 是 products.html。 
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9.2 














it 404.html 

8 apple-touch-icon-precomposed.png 
crossdomain.xml 

la css 

B. favicon.ico 

L3] fonts 

i! humans.txt 

iJ img 

i index.html 

E js 

L3 less 

|I LICENSE.md 

products.html 

i& README.md 

il robots.txt 











在 编辑 器 中 打开 products.html， 看 一 下 其 中 的 标记 。 


标记 中 的 nead、 页 涉 、 导 航 条 元 素 都 和 第 4 章 一 样 。 不 一 样 的 地 方 在 main role="main" 
元 素 中 ， 这 个 元 素 中 包含 的 新 内 容 按 先后 顺序 是 : 


O 用 无 序列 表 生 成 的 面包 屑 导航 链接 ; 

口 用 nhl 表示 的 页 面 标题 ; 

a 一 系列 用 于 筛选 商品 的 选项 ; 

O 九 种 商品 ， 分 别 带 有 小 图 、 标 题 、 说 明和 按钮 ; 

a 用 无 序列 表 生 成 的 分 页 链接 ， 位 于 商品 之 下 ， 站 点 页 脚 之 上 。 

如 果 你 在 浏览 器 中 打开 这 个 文件 ， 会 发 现 很 多 地 方 都 没有 完成 。 面 包 习 看 起 来 还 不 像 面 
包 导 ， 筛 选 选项 还 是 一 堆 无 序列 表 ， 商 品 展示 区 也 不 齐整 (有 的 商品 甚至 错位 )。 

面 对 这 个 乱糟糟 的 局 面 是 不 是 有 点 手足 无 措 了 ? 不 要 紧 , 下 面 我 们 马上 就 来 做 点 什么 。 


口 首先 要 应 用 Bootstrap 内 置 的 面包 导 、 页 面 标题 和 分 页 链接 的 样式 ， 再 对 它们 进行 自 
定义 。 

口 然后 ， 我 们 要 改进 九 个 商品 的 布局 ， 创 造 性 地 使 用 Bootstrap 的 网 格 系统 ， 让 这 些 格 子 
在 不 同 断 点 切换 时 保持 视觉 上 的 整齐 划一 。 

口 最 后 ， 就 是 要 给 筛选 选项 添加 样式 ， 主 要 是 增强 它们 的 布局 ， 再 使 用 Font Awesome 图 
标 作 为 复 选 框 。 


有 了 规划 ， 下 面 就 动手 吧 
















































































o 


面包 悄 、 页 面 标题 和 分 页 导航 


接 下 来 ,我 们 要 把 Bootstrap 的 样式 应 用 到 面包 应 、 页 面 标题 和 分 页 导航 ， 然 后 再 对 它们 
进行 自 定 义 ， 以 适应 我 们 的 设计 。 
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(1) 在 编辑 器 中 打开 products.html。 
D 找到 位 于 页 面 标题 ni 上 方 的 无 序列 表 , 给 ul 标签 添加 类 breadcrumb, 然后 给 最 后 
一 个 列表 项 添加 类 active: 


«ul class="breadcrumb"> 
«li»«a href="#">Home</a></1i> 
<li><a href="#">Parent Category</a></li> 
<li class="active">Current Category</li> 
</ul> 


这 两 个 类 对 应 相关 Bootstrap AMEA FEX, JHOROCE HESS XX HL: http://getbootstrap. 


com/components/#breadcrumbs。 


保存 并 刷新 浏览 器 。 应 该 能 看 到 如 下 图 所 示 的 效果 : 


Home / Parent Category 


(3) BE F3 Boe X ifii [uU TT, 去 掉 浅 灰色 背景 和 多 余 的 内 边 距 。 对 于 这 个 简单 的 调整 
我 们 可 以 直接 修改 boostrap 文件 夹 中 的 breaderumbs.less 文件 ， 同时 注释 掉 不 需要 的 
行 ， 这 样 可 以 留 下 修改 的 痕迹 。 


把 padding 设置 为 0， 完 全 删除 background-color， 使 用 注释 可 以 让 我 们 以 后 知 
道 在 这 里 修改 了 什么 : 


.breadcrumb { 
padding: 0; // 8px 15px; // edited 
margin-bottom: Gline-height-computed; 
list-style: none; 
// background-color: Gbreadcrumb-bg; // edited 


(4) 下 面 是 页 面 标题 。Bootstrap 的 页 面 标题 需要 被 攀 套 在 类 为 page-header 的 div 元 素 
中 。 相 关 文 档 可 以 参考 这 里 : http://getbootstrap.com/components/Zpage-header o 


我 们 按照 文档 来 调整 标记 ， 为 了 利用 Bootstrap 给 标题 注释 添加 的 样式 ， 再 在 small 
标签 中 添加 一 些 文本 内 容 : 
«div class-"page-header"» 
«hi»Product Category Name «small»with explanatory 
text«/small»«/h1-» 
«/div» 


这 样 就 会 得 到 如 下 所 示 的 结 


























Product Category Name 








nnnnnmmmnnnmnnmnrmnmrnmrnmrmrmrmr http: //blog.si na. comcrn/u 3283485963 





144 9 53k 电子 商务 网 站 





(5) 保留 标题 带 的 内 、 外 边 距 ， 删 除 下 方 边框 。 打 开 bootstrap 文件 夹 中 的 type.less 文件 ， 
搜索 .page-header 并 把 规则 border-bottom 注释 掉 : 


.page-header { 


// border-bottom: 1px solid Gpage-header-border-color; 
} 


保存 ， 刷 新 ， 就 会 看 到 更 清爽 的 结果 。 更 多 的 空白 与 我 们 整体 设计 保持 了 一 致 ， 如 下 
图 所 示 : 





Home Parent Category 








Product Category Name 





(6) 最 后 是 分 页 链接 。 相 关 的 标题 就 在 关闭 的 main 标签 ( </main> ) 稍微 靠 上 一 点 。 在 
这 个 标题 之 上 ， 依 次 是 .container、.row 和 .products-grid 的 关闭 div 标签 : 

















«/div»«!-- /.products-grid --» 
«/div»«!-- /.row --» 
«/div»«!-- /.container --» 
«/main» 


ffpagination 。 


| ŞS Bootstrap 中 分 页 样式 的 文档 在 这 里 : http://getbootstrap.com/components/ 





要 应 用 分 页 导航 样式 ， 只 需 把 class="pagination" 添 加 到 关闭 的 .products-grid 
标签 之 上 的 ul 标签 


«ul class-"pagination"- 
<li><a href="#"><span class="fa fa-chevron-left"»«/span» 





Prev«/a»«/li» 
<li><a hrefz"i4"»21«/a»«/li» 
<li><a hrefz"i"»22«/a»«/li» 
<li><a hrefz"i"»23«/a»«/li» 
<li><a hrefz"i4"»24«/a»«/li» 


«li»«a href="#">Next «span class-"fa fa-chevron- 
right"»«/span»«/a»«/li» 
«/ul» 


M 对 于 Next 和 Prev， 原 来 的 标记 中 已 经 应 用 了 类 为 a-chevron-1Left 
和 a-chevron-right 的 span 标签 ， 以 使 用 Font Awesome 图 标 。 




















结果 就 是 得 到 如 下 所 示 的 屏幕 截图 : 
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C) 下 面 让 分 页 导航 在 网 格 下 方 居 中 。 首 先 ,把 它 包围 在 一 个 aiv 标签 中 ,给 这 个 标签 一 个 
row 类 以 保证 它 清除 上 方 内 容 ,， 然 后 添加 一 个 恰如其分 的 自 定 义 类 pagination-wrap: 
«div class="row pagination-wrap"» 

«ul class-"pagination"» 
SIT wa 


«/ul» 
«/div» 


(8) 现在 就 要 自己 写 样 式 让 这 个 组 件 在 它 的 父 元 素 内 居中 。 在 第 4 章 中 , 我们 使 用 了 自 定 
X LESS 文件 page-contents.less 可 保存 自 定 义 样 式 。 在 此 ， 我 们 创建 一 个 更 具体 的 
文件 来 保存 针对 商品 网 格 的 样式 。 创 建新 文件 products-gridless， 将 其 与 其 他 自 定义 
LESS 文件 保存 在 一 起 ， 然 后 加 入 以 下 样式 : 


.pagination-wrap ( 
text-align: center; 


} 


保存 文件 。 
(9) 最 后 把 新 文件 添加 到 LESS 文件 的 导航 列表 。 打 开 less 文件 夹 中 的 _main.less， 在 注释 
// Other custom files 下 面 添加 一 行 导 入 语句 : 


Gimport " products-grid.less"; // added 
保存 这 个 文件 ， 然 后 编译 为 CSS 。 
刷新 浏览 器 ， 应 该 看 到 分 页 导航 居中 了 。 









































5.3 ”调整 商品 网 格 
这 一 节 我 们 要 把 商品 网 格调 整 到 位 。 仔 细 看 一 看 每 个 商品 的 标记 ， 你 会 发 现 它 们 都 有 一 


个 类 : col-sm-4: 





«div class-"product-item col-sm-4"- 
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这 个 类 虽然 起 到 了 约束 每 个 商品 宽度 的 作用 ， 但 整个 网 格 看 起 来 仍然 尽 不 如 人 意 。 





主要 问题 是 每 个 商品 的 高 度 不 确定 。 因 此 ，Bootstrap 在 向 左 浮动 所 有 商品 时 ， 后 面 的 商 
品 就 有 可 能 搬入 到 前 面 的 商品 中 。 结 果 就 是 整个 网 格 显得 很 乱 ， 如 下 图 所 示 。 





Exceptional Even Longer Product Title 

P roduct Title P roduct Title This text describes the above product a 
little not too much but just enough or 

This text describes the above product a This text describes the above product a maybe a little more 


little not too much but just enough -- or 
maybe we'll go on even longer on this 
one just because it's fun and, well, this 
product just really deserves it! 


little not too much but just enough 


product © 


Longer Product 
Title 


This text describes the above product a 
little not too much 


uct O 








目前 ， 在 中 大 型 视 口 中 ， 第 4~7 个 商品 由 于 高 度 不 等 ， 浮 动 后 没有 对 齐 。 
我 们 的 任务 就 是 要 调整 网 格 系统 ， 让 所 有 网 格 的 视觉 效果 得 到 增强 。 调 整 之 后 ， 马 上 就 
解决 布局 的 问题 。 
(1) 因为 要 写 自 定义 的 样式 ， 所 以 还 要 用 编辑 髓 打开 _ products-grid.less。 
D 下 面 写 一 些 样式 ， 调 整 图 片 宽度 、 字 号 、 内 边 距 和 外 边 距 ， 代 码 如 下 : 
.product-item ( 
padding-bottom: 32px; 
img ( 
width: 100$; 
z { 


font-size: @font-size-large; 
line-height: 1.2; 
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padding: 0 !important; 
margin-top: 6px; 
margin-bottom: 2px; 
} 

pít 
font-size: Gfont-size-small; 
line-height: 1.3; 
color: @gray; 

j 

} 


(3) 以 上 样式 的 作用 如 下 : 

口 给 每 个 商品 底部 添加 一 些 内 边 距 ; 

口 把 每 个 商品 小 图 的 宽度 限制 在 商品 区 域内 ; 

口 把 n2 的 字号 减 小 到 @font-size-large; 

口 把 p 的 字号 减 小 到 @font-size-small; 

O 把 nh2 的 内 边 距 减 小 为 0， 使 用 !important 保证 覆盖 我 们 在 标准 页 面 中 应 用 的 冲 
突 规则 ; 

口 把 p 的 字体 颜色 设置 为 egray。 

保存 新 样式 ,编译 为 CSS， 再 刷新 浏览 器 。 尽 管 此 时 的 布局 还 不 整齐 ， 但 整体 效果 已 
经 大 为 改观 ， 如 下 图 所 示 : 




















Longer Product Title Even Longer Product Title 
This text describes the above product a little This te 
not too muct not too 








View this product © becaus 


really deserves it! 





























(4) 现在 该 来 解决 布局 问题 了 。 解决 问题 的 关键 是 找到 最 高 的 商品 。 假 设 我 们 有 一 个 指南 ， 
其 中 对 每 个 商品 使 用 什么 图 片 和 文字 介绍 都 有 规划 。 所 有 商品 的 小 图 都 是 标准 大 小 ， 
文字 说 明 也 不 会 比 当前 我 们 示例 页 面 中 的 多 。 这 样 的 话 , 我 们 就 可 以 给 所 有 商品 都 设 
置 一 个 固定 的 高 度 ， 或 者 使 用 em 或 ex 等 更 灵活 的 单位 。 在 我 们 这 个 练习 中 ， 我 们 
就 使 用 360px 的 固定 值 ， 并 把 超出 的 部 分 隐藏 起 来 。 因 为 这 些 规则 针对 的 是 页 面 布 
局 ， 所 以 我 们 要 单独 写 一 条 规则 ， 文 件 当 然 还 是 _products-grid.less: 
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.product-item { 
height: 360px; 
overflow: hidden; 


} 





保存 这 个 文件 ， 编 译 为 CSS ， 然 后 刷新 浏览 器 。 你 会 发 现 布局 问题 瞬间 得 到 了 解决 ! 








H 
结果 如 下 图 所 示 : 
Product Title Longer Product Title Even Longer Product Title 
Exceptional Product Title Even Longer Product Title Product Title 
tO 
tO 








(5) 在 此 之 后 ， 我 们 就 可 以 放心 地 使 用 Bootstrap 的 响应 式 分 栏 类 ， 去 调整 不 同 视 口 的 布 














局 效果 了 。 有 具体 来 说 ， 我 们 希望 当 视 口 小 和 超 小 时 ， 每 行 只 显示 两 个 商品 ; 而 当 视 口 
中 等 或 较 大 时 ， 每 行 显示 三 个 商品 。 为 实现 这 个 效果 , 我们 要 找到 并 替换 每 个 商品 中 














的 类 ， 结 果 要 变 成 如 下 所 示 : 


«div class-"product-item col-xs-6 col-md-4"> 




















替换 成 这 两 个 类 之 后 ， 每 个 商品 在 超 小 和 小 视 口 中 将 会 是 屏幕 宽度 的 一 半 ， 而 在 中 大 








视 口 中 将 切换 成 屏幕 宽度 的 三 分 之 一 。 








保存 ,编辑 并 刷新 浏览 器 。 拖 放 浏 览 器 窗口 , 变 小 再 变 大 , 看 看 商品 动态 





以 下 是 小 和 超 小 视 口 下 的 情景 : 
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Product Title Longer Product Title 
This text describes the above product a This text describes the above product a 
little not too much but just enough or little not too much 


maybe a little more 
View this product O 


View this product O 


Even Longer Product Title Exceptional Product Title 
This text describes the above product a This text describes the above product a 
little not too much but just enough -- or little not too much but just enough 


maybe we'll go on even longer on this one 
just because it's fun and, well, this product 
just really deserves it! 


View this product O 


View this product O 











然后 ， 在 中 大 视 口 中 ， 商 品 会 变 成 三 栏 : 
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Product Title 
This text describes the above 
product a little not too much but just 


Longer Product Title 
This text describes the above 
product a little not too much 


Even Longer Product Title 
This text describes the above 
product a little not too much but just 


enough -- or maybe we'll go on 
even longer on this one just 
because it's fun and, well, this 
product just really deserves it! 


enough or maybe a little more 
View this product O 


View this product O 


View this product O 


Product Title 

This text describes the above 
product a little not too much but just 
enough or maybe a little more 


Even Longer Product Title 
This text describes the above 
product a little not too much but just 
enough 一 or maybe we'll go on 
even longer on this one just 
because it's fun and, well, this 
product just really deserves it! 


Exceptional Product Title 
This text describes the above 
product a little not too much but just 
enough 


View this product O View this product O 


View this product O 








看 着 真是 一 种 享受 啊 。 
接 下 来 我 们 来 设计 筛选 选项 及 侧 边栏 。 
5.4 侧 边栏 和 筛选 选项 


侧 边 栏 和 筛选 选项 就 在 商品 标记 的 前 面 。 在 小 、 中 、 大 视 口 中 ,， 侧 边栏 目前 都 位 于 左 侧 。 
目前 侧 边栏 的 样子 如 下 所 示 : 
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Narrow your 
selection 


Clearance Sale 


View clearance items 


Categories 


* Option 1 
e Option 2 
* Option 3 
* Option 4 
* Option 5 
* Option 6 
* Option 7 
* Option 8 
* Option 9 
* Option 10 


Brands 


* Option 1 
e Option 2 
* Option 3 
* Option 4 
e Option 5 
e Option 6 











而 在 完成 设计 工作 后 ， 我 们 希望 把 Clearance Sale 做 成 一 个 超大 按钮 ， 把 筛选 选项 排 成 两 
栏 ， 而 且 每 个 选项 前 是 复 选 框 而 非 项 目 符号 ， 如 下 图 所 示 : 














Narrow your selection 

Clearance Sale 
View clearance items 

Categories 

D Option 1 O Option 2 

O Option 3 J Option 4 

O Option 5 Option 6 

D Option 7 O Option 8 

O Option 9 C) Option 10 

Brands 

D Option 1 Option 2 

O Option 3 C) Option 4 

O Option 5 C) Option 6 

D Option 7 O Option 8 

D Option 9 O Option 10 











下 面 先 从 基本 的 样式 开始 ， 把 布局 弄 好 。 
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5.4.1 基本 布局 
我 们 先 来 调整 字体 、 颜 色 、 外 边 距 和 内 边 距 。 
在 _prod ucts-grid.less 中 添加 如 下 规则 : 


.grid-options { 
.panel; 
.panel-default; 
padding-top: 12px; 
padding-bottom: 24px; 
»h2( 
margin-top: 0; 
font-size: 1.5 * (Gfont-size-large); 
line-height: 1.2; 
color: QGgray-dark; 
} 
} 





上 面 的 代码 用 途 如 下 : 
口 给 侧 边栏 应 用 Bootstrap 默认 的 panel 样式 (参见 : http://getbootstrap.com/components/ 
#panels ); 





PX 


口 给 侧 边栏 添加 上 、 下 内 边 距 ， 让 新 背景 贯穿 侧 边栏 内 容 
O 调整 n2 标题 的 字号 、 行 高 和 颜色 。 


下 一 步 来 做 Clearance Sale 按钮 。 





5.4.2 Clearance Sale 按 钮 


我 们 要 把 Clearance Sale 链接 变 成 一 个 超大 的 吸引 人 的 按钮 。 

按照 下 面 的 说 明 调 整 标 记 : 

口 把 链接 的 标题 和 上 段落 都 转换 成 按钮 ; 

口 添加 自 定义 的 按钮 类 btn-£eature, 这 是 我 们 在 第 4 章 创 建 的 , 具有 特殊 的 颜色 一 一 

zT f^; 

口 给 整个 标签 添加 Font Awesome 图 标 ， 通 过 使 用 Font Awesome 内 置 的 icon-3x 25, 将 
图 标 放 大 三 倍 。 
































http://fontawesome.1o/examples/Zlarger v 


| 要 了 解 Font Awesome 特殊 尺寸 类 的 更 多 信息 ， 请 参考 相关 文档 : 





调整 后 的 标记 如 下 所 示 : 


«a class-"btn btn-feature choose-clearance" href="#"> 
«span class-z"icon fa fa-tag fa-3x"»«/span» 
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«h3»Clearance Sale</h3> 
«p»View clearance items</p> 
«/a» 


效果 立竿见影 ， 我 们 向 目标 迈进 了 一 大 步 : 














下 面 再 细 化 ， 完 成 下 列 目标 。 


(1) 将 Clearance Sale 显示 为 块 级 元 素 , 使 用 . center-block() 这 个 Bootstrap 的 混入 将 其 
居中 。 

Q) 强制 其 宽度 为 包含 栏 的 92.5%。 

(3) 添加 上 、 下 内 边 距 。 

(4) 覆盖 Bootstrap 按钮 的 white-space: nowrap 规则 ， 让 文本 可 以 折 行 (Bootstrap 的 
white-space 规则 是 在 less/bootstrap/buttons.less 中 定义 的 ， 关 于 这 个 属性 的 更 多 信 

息 ， 大 家 可 以 参考 http://css-tricks.com/almanac/properties/w/whitespace/ )。 

(5) 将 按钮 设置 为 相对 定位 ， 以 便 对 标签 应 用 绝对 定位 。 

(6) 调整 标题 和 上 段落 的 字体 、 颜 色 和 外 边 距 

(7) 把 标签 图 标定 位 到 右上 和 角 。 


以 上 目标 通过 下 列 规则 就 可 以 实现 : 


.Choose-clearance { 
.center-block(); 
width: 92.5$; 
padding-top: 20px; 
padding-bottom: 12px; 
white-space: normal; 
position: relative; 
h3 ( 

font-weight: normal; 
color: #fff; 
padding-top: 4px; 
margin: 6px; 











— 


pl 
margin: 6px 20px; 
line-height: 1.2; 
} 


.icon { 
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position: absolute; 
top: 0; 
right: 2px; 
} 
} 


结果 就 像 下 面 屏幕 截图 一 样 : 





d 


Clearance Sale 
View clearance items 





不 止 如 此 ， 这 些 样式 在 不 同 视 口 下 的 表现 也 很 出 色 。 不 信和 就 花 点 时 间 多 试 坛 。 当 然 ， 有 
什么 不 满意 的 地 方 ， 请 大 家 以 此 为 起 点 自行 改进 。 


接 下 来 该 轮 到 筛选 商品 的 选项 了 。 


5.4.3 ”选项 列表 
本 节 ， 我 们 要 把 几 个 列表 转换 成 筛选 选项 。 
如 果 花 点 时 间 分 析 一 下 在 线 商 店 Amazon( http://www.amazon.com ) 或 Zappos( http://www. 
zappos.com ) 的 商品 筛选 选项 , 会 发 现 这 些 选项 其 实 是 链接 列表 , 而且 每 个 选项 都 被 搞 成 
了 复 选 框 的 样子 。 我 们 也 要 把 链接 做 成 复 选 框 的 样式 ， 用 户 只 要 选择 就 会 勾 选 ， 另 外 我 
们 还 要 调整 它们 以 适应 多 样 化 的 设备 ， 包 括 平 板 电 脑 和 智能 手机 。 








在 Amazon f Zappos 等 电子 商务 网 站 上 , 筛选 项 与 内 容 管 理 系 统 是 关联 

的 ， 网 格 中 的 商品 会 随 着 用 户 选择 筛选 项 而 动态 变化 。Bootstrap 是 一 个 
一 前 端 设计 框架 ， 不 是 内 容 管 理 系统 。 因 此 ， 我 们 这 个 练习 做 不 到 动态 得 
选 商品 。 但 我 们 这 个 页 面 完成 后 , 是 完全 可 以 在 内 容 管 理 系统 中 使 用 的 。 


先 从 每 个 列表 的 n3 元 素 开 始 ， 我 们 调整 它们 的 大 小 、 行 高 、 外 边 距 和 颜色 : 


.grid-options ( 
»h3 ( 
font-size: QGfont-size-large; 
line-height: 1.2; 
margin-top: 12px; 
color: QGgray-dark; 
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şs t RONDE 子 选 择 符 ， 因 为 我 们 不 希望 它 应 用 到 n3 标签 ， 特 别 是 
能 应 用 到 Clearance Sale 按钮 中 的 h3 标签 




















把 注意 力 集中 到 无 序列 表 上 。 它 们 都 有 一 个 特殊 的 类 ， 叫 options-1ist, 我 们 
= 它 作 为 选择 符 ， 确 保 只 针对 这 些 特殊 的 列表 。 


首先 去 掉 项 目 符 号 和 内 边 距 : 


.grid-options { 














.options-list ( 
list-style-type: none; 
padding-left: 0; 

} 


接 下 来 是 链接 样式 。 稍 后 我 们 还 要 给 列表 项 添加 样式 ， 因 此 我 们 把 这 些 样式 包含 在 了 启 
套 的 选择 符 中 。 





.btn; 
.btn-sm; 
padding-left: 0; 
padding-right: 0; 
color: QGgray; 
&:hover, 
&:focus, 
&:active, 
.active & ( 
color: Glink-color; 
} 
} 
} 


以 上 规则 的 作用 如 下 。 


O 我 们 利用 LESS 通过 .btn 类 加 入 了 基本 的 按钮 样式 ,包括 显示 inline-block 链接 和 
额外 的 内 边 距 : 


m 因为 没有 添加 其 他 按钮 类 ， 所 以 也 没有 出 现 背 景 颜色 ; 

m 通过 添加 基本 的 按钮 样式 ， 可 以 让 用 户 更 方便 点 击 ， 使 用 手指 或 鼠标 皆 宜 。 
口 我 们 再 通过 .btn-sm 类 引入 相关 样式 ， 以 减少 内 边 距 ， 并 让 字号 比 标准 按钮 再 小 一 些 
(要 了 解 Bootstrap 的 按钮 类 ， 请 参见 : http://getbootstrap.com/css/#buttons )。 

口 接着 删除 无 序列 表 的 左 和 右 内 边 距 。 
O 再 把 链接 文本 的 颜色 改 为 egray。 
口 最 后 ， 设 置 悬 停 、 焦 点 和 活动 链接 的 颜色 为 elink-color。 
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5.4.4 


现在 应 该 保存 、 编 译 并 刷新 浏览 器 ， 看 看 结果 。 结 果 应 该 如 下 岁 所 示 : 























Categories 





每 个 选项 链接 都 有 了 内 边 距 ， 字 号 和 颜色 也 都 合适 了 。 


有 读者 可 能 奇怪 为 什么 我 要 在 这 里 借用 按钮 的 .btn 和 .btn-sm 类 ， 而 
Q0 ”不 是 直接 把 这 两 个 类 写 进 标 记 。 当 然 也 可 以 那么 做 ,但 考虑 到 链接 的 数 
量 那么 多 ,我 起 还 是 通过 CSS 来 应 用 样式 更 便捷 。 本 章 后 面 几 节 ， 我 们 
将 继续 沿用 这 种 思路 , 对 Font Awesome 图 标 样式 也 采用 LESS 而 非 直接 

在 标记 中 添加 类 来 应 用 。 


好 了 ,下 一 步 是 给 选项 链接 添加 复 选 框 。 


为 选项 链接 添加 Font Awesome 图 标 复 选 框 


RE, 我们 将 使 用 Font Awesome 图 标 在 选项 链接 左 侧 添 加 复 选 框 。 但 我 们 不 在 标记 中 添 
加 ， 而 是 在 LESS 中 添加 ， 因 为 更 快捷 。 然 后 我 们 更 进一步 ， 加 入 另 一 个 Font Awesome 
图 标 ， 以 表示 悬 停 、 聚 焦 和 活动 状态 下 勾 选 的 复 选 框 。 


通过 LESS 添加 图 标 需 要 从 三 个 文件 中 取得 Font Awesome 样式 。 首 先 ， 从 font-awesome 
文件 夹 的 core.less 中 获得 基本 的 样式 。 在 这 个 文件 中 ， 可 以 看 到 以 下 重要 的 样式 : 
.G(fa-css-prefix) ( 

display: inline-block; 

font-family: FontAwesome; 

font-style: normal; 

font-weight: normal; 

line-height: 1; 

-webkit-font-smoothing: antialiased; 

-moz-osx-font-smoothing: grayscale; 


} 


以 上 样式 是 所 有 Font Awesome 图 标 样式 的 基础 , 包括 作为 字体 的 Font Awesome 图 标 , 以 
此 为 基础 可 以 进一步 加 强 相应 的 样式 。 

对 现在 的 需求 来 说 ， 我 们 不 需要 选择 符 也 不 需要 花 括号 ， 只 需要 其 中 的 规则 。 我 们 要 把 
这 些 样式 应 用 给 选项 链接 。 最 重要 的 ， 我 们 要 使 用 :before 伪 元 素 ， 因 为 可 以 确保 结果 
最 佳 。 
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要 了 解 更 多 CSS2.1 :before 伪 元 素 的 信息 , 请 参考 这 篇 文章 : http://coding. 
smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo- 


elements-in-css/ ; 





从 core.less 中 复制 上 面 的 规则 ( 不 包括 选择 符 )， 粘 贴 到 _products-grid.less XEF, mE 
如 下 : 


.grid-options { 





li ( 
at 
&:before ( 
// from font-awesome/core.less 
display: inline-block; 
font-family: FontAwesome; 
font-style: normal; 
font-weight: normal; 
line-height: 1; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 


这 些 规则 为 我 们 下 一 步 打 下 了 基础 。 下 一 步 就 可 以 指定 使 用 哪个 Font Awesome 图 标 了 。 
浏览 这 个 页 面 : http:/fontawesome.io/icons/， 会 发 现 空 复 选 框 的 图 标 和 类 名 : 


O fa-square-o 


这 个 图 标的 LESS 规则 可 以 在 font-awesome 文件 夹 的 icons.less 文件 里 找到 。 打开 该 文件 ， 
搜索 字符 串 } -square-o (包括 右 花 括号 可 以 减少 匹配 项 ， 从 而 缩小 范围 )， 可 以 看 到 下 
面 这 一 行 : 














.@{fa-css-prefix}-square-o:before ( content: @fa-var-square-o; ) 


对 于 前 面 这 一 行 ， 我 们 只 需要 content: efa-var-sauare-o。 把 它 复制 粘贴 到 之 前 
&:before 选择 符 中 规则 的 后 面 : 


Tid 


























at 
&:before ( 
content: Gfa-var-square-o; 


最 后 ， 我 们 想 取 得 另 一 些 Font Awesome 样式 ， 为 图 标 设 置 固 定 的 宽度 ， 避 免 图 标 在 切换 
时 出 现 位 移 。 这 些 样式 可 以 在 font-awesome 文件 夹 的 fixed-width.less 文件 中 找到 。 复 制 
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下 面 这 两 行 ， 同 样 粘贴 到 &:before 选择 符 中 : 


(18em / 14); 
center; 





width: 
text-align: 


添加 上 面 的 样式 后 ， 编 译 它们 为 CSS 并 刷新 浏览 希 。 应 该 看 到 下 图 所 示 的 复 选 框 : 








Categories 























接 下 来 ,我 们 以 同样 的 方式 添加 选择 符 和 规则 ， 把 Font Awesome 复 选 框图 标的 勾 选 版 应 
用 给 链接 的 悬 停 、 焦 点 和 活动 状态 : 
li ( 


aí 
&:before ( 


content: Gfa-var-square-o; 
} 
&:hover:before, 
&:focus:before, 
&:active:before, 
.active &:before { 
content: @fa-var-check-square-o; 
j 
} 


保存 文件 ， 编 译 为 CSS， 然 后 刷新 浏览 器 。 
选 的 复 选 三， 如 下 图 所 示 : 





"ABUS EAR T BEBE EIN, UAE SIC 

















Categories 








0 请 大 家 注意 ， 目 前 我 们 还 没有 办 法 强制 某 个 链接 停留 在 活动 状态 ， 因 为 
我 们 没有 内 容 管理 系统 支撑 。 但 我 们 的 样式 已 经 刘备， 如果 有 了 内 容 管 
理 系统 ， 就 可 以 直接 用 了 。 
就 这 样 了 ! 我 们 成 功 地 给 链接 添加 了 复 选 框 ， 能 对 用 户 的 操作 给 出 反馈 了 。 
接 下 来 ， 考 虑 一 下 充分 利用 侧 边栏 的 空间 ， 让 选项 浮动 起 来 。 
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5.4.5 ”使 用 LESS 混 入 在 栏 中 对 齐 选项 
上 一 节 , 我 们 使 用 LESS 实现 了 以 往 需要 通过 添加 标记 实现 的 功能 。 考 虑 到 筛选 项 的 数量 
很 多 ， 这 样 做 效率 最 高 。 同 样 的 思路 也 适用 于 我 们 对 齐 侧 边栏 中 的 选项 。 
当然 ， 如 果 使 用 Bootstrap 的 row 和 栏 类 ,通过 调整 标记 也 是 可 以 的 : 
«ul class-"options-list options-categories row"> 


«li class="col-xs-6"><a href-"i$"»2O0ption 1«/a»«/li» 
«li class="col-xs-6"><a href-"i$"»2O0ption 2«/a»«/li» 


























但 有 了 Bootstrap 的 混入 ,我 们 用 几 行 LESS 代码 可 以 就 实现 同样 的 效果 。 
(1) 首先 给 .options-1list 选择 符 应 用 .make-row() 混 入 : 


.options-list { 
.make-row(); 








这 个 混入 加 入 的 样式 与 我 们 在 标记 中 添加 row 类 加 入 的 样式 一 样 。 但 这 里 只 需要 一 
行 代码 。 
(2) 然后 使 用 .make-xs-col () 混 和 给 列表 项 应 用 分 栏 规则 : 


li ( 
.make-xs-column(6); 


这 样 就 跟 我 们 给 相关 的 1i 标签 添加 co1-xs-6 类 的 效果 一 样 了 。 


(3) 添加 前 面 两 行 之 后 ， 保 存 文件 ， 编 译 为 CSS， 再 刷新 浏览 器 。 应 该 可 以 看 到 选项 链接 
分 成 两 栏 了 : 





























Categories 
Option 1 


Option 3 Option 4 


























不 错 吧 ! 
接 下 来 针对 小 视 口 进行 一 番 调 整 。 


5.4.6 ”针对 平板 和 手机 调整 选项 列表 布局 
我 们 要 限制 选项 面板 的 宽度 ， 让 它 在 平板 电脑 中 不 至 于 太 宽 。 
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目前 来 看 ，Clearance Sale 按钮 有 点 太 宽 了 。 在 480~768px 下 ， 选 项 列表 相隔 也 太 远 了 。 
相应 的 截图 如 下 所 示 : 





Narrow your selection 


Clearance Sale 


View clearance items 


Categories 


tion 1 











其 实 只 要 给 选项 面板 设置 一 个 最 大 宽度 就 行 了 : 
.grid-options { 
max-width: 480px; 


下 面 我 们 再 调整 选项 列表 ,让 它们 在 小 视 口中 显示 为 三 栏 。 fH LESS, 可 以 在 适当 的 选 
择 符 中 山 套 一 个 媒体 查询 ,然后 在 其 中 添加 一 个 用 于 调整 的 .make-xs-column (4) 混 入 : 
lii 

.make-xs-column(6); 

QGmedia screen and (max-width: Gscreen-xs-max) ( 


.make-xs-column(4); 


) 


这 样 调整 之 后 ， 保 存 文件 ， 编 译 为 CSS， 然 后 在 小 屏幕 ( 视 口 ) 中 测试 一 下 。 应 该 看 类 
似 下 图 所 示 的 结 








Product Category Name 


Narrow your selection 


中 


Clearance Sale 


View clearance items 


Categories 














现在 再 我 们 解决 下 一 个 问题 : 在 单 栏 布局 中 隐藏 筛选 选项 ， 只 在 需要 时 显示 。 
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5.4.7 ”在 手机 上 折 双 选项 面板 


现在 ， 短 选项 占据 了 相当 多 的 垂直 空间 。 这 在 小 屏幕 上 是 个 问题 ， 会 把 商品 网 格 推 到 页 
面 下 方 很 远 的 地 方 。 

















Narrow your selection 


© 


Clearance Sale 


View clearance items 





Categories 

O Option 1 O Option 2 D) Option 3 
O Option 4 O Option 5 O Option 6 
D Option 7 D Option 8 C) Option 9 
D) Option 10 

Brands 

O Option 1 O Option 2 O Option 3 
O Option 4 D Option 5 O Option 6 
CJ Option 7 DJ Option 8 CJ Option 9 
D Option 10 


Another Filter 





O Option 1 O Option 2 O Option 3 

DJ Option 4 O Option 5 CJ Option 6 

C) Option 7 O Option 8 C) Option 9 

IV Option 10 

Product Title Longer Product Title 
This text describes the above This text describes the above 
product a little not too much product a little not too much 
but just enough or maybe a 

little more View this product O 


View this product O 





























原因 就 是 第 选项 不 必要 地 占据 了 大 量 空 间 。 商 品 本 身 才 是 最 应 该 首先 显示 的 。 我 们 既 要 
让 用 户 迅 速 看 到 商品 ， 也 可 以 在 需要 时 打开 惫 选项 。 
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为 此 ， 我 们 使 用 Bootstrap 的 折 县 搬 件 。 下 面 几 步 讲解 如 何 对 选项 面板 使 用 折 和 县 插件 ， 同 
时 添加 一 个 扩展 面板 的 按钮 ， 并 把 折 和 县 行为 限定 在 罕 视 口中 。 


(1) 在 编辑 器 中 打开 products.html。 

(2) 添加 一 个 新 的 div 标签 ， 包 装 Clearance Sale 按钮 和 三 个 选项 列表 。 给 这 个 aiv 添加 
一 个 特殊 的 类 collapse， 以 及 一 个 唯一 的 ID ， 以 便 JavaScript 插件 找到 它 ， 同 时 也 
添加 一 个 同名 的 类 : 


«div id="options-panel" class-"options-panel collapse"» 
«a class="btn btn-feature choose-clearance" href="#"> 














«h3»Categories«/h3» 
«ul class-"options-list options-categories"» 
<li><a href="#">Option 10«/a»«/li» 


«/ul» 
«/div»«!-- /tdoptions-panel.collapse --» 


Bootstrap $4 Jr $* JavaScript 4 4-4, 7€ RE v& JS. Ar de AR P 488 89 
这 个 插件 也 可 以 用 于 其 他 用 途 ， 有 具 体 可 参考 Bootstrap 的 文档 : 
http://getbootstrap.com/javascript/Zcollapse ; 


(3) 保存 文件 ， 刷 新 浏览 器 。 你 会 发 现 Clearance Sale 按钮 和 选项 列表 顿时 从 眼前 消失 了 。 
只 剩 下 选项 面板 上 方 的 h2 标题 “Narrow your selection” 了 ， 如 下 图 所 示 : 





Narrow your selection 47 








现在 需要 一 个 切换 按钮 ， 在 被 点 击 时 显示 筛选 项 。 


(4) 在 这 个 还 能 看 见 的 内 容 为 “Narrow your selection” 的 h2 中 ， 添 加 一 个 button 元 素 ， 
还 有 相应 的 属性 : 


<h2 class="clearfix">Narrow your selection 
«button type-"button" 
class-"options-panel-toggle btn btn-primary pull-right" 
data-toggle-"collapse" data-target-"fHtoptions-panel"» 
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«span class-"icon fa fa-cog fa-2x"»«/span» 
«/button» 
«/h2» 


下 面 来 解释 一 下 上 面 的 标记 : 

口 给 n2 添加 的 clearfix 类 可 以 确保 它 包 含 切换 按钮 ， 因 为 切换 按钮 是 浮动 到 右边 
的 (可 以 在 bootstrap 文件 夹 的 utilities.less 文件 中 找到 clearfix 2$, 在 mixins.less 
文件 中 找到 生成 它 的 混入 ); 

口 类 btn 和 btn-primary 会 给 新 的 按钮 添加 Bootstrap 的 基本 按钮 样式 ， 背 景 颜色 

Jjebrand-primary; 

O 类 pull-right 会 把 按钮 浮动 到 右 侧 ; 

O 在 button 元 素 中 ， 我 们 放 了 一 个 Font Awesome 齿轮 图 标 ,， 使 用 fa-2x 类 放大 到 
两 倍 。 

保存 并 刷新 浏览 器 ， 可 以 看 到 下 面 的 结果 : 


Narrow your selection EJ 


(5) 下 面 要 写 一 些 规则 ， 在 中 大 屏幕 中 隐藏 切换 按钮 并 展开 选项 面板 。 为 此 ， 可 以 在 
_products-grid.less 中 添加 以 下 规则 : 


// Responsive adjustments 
@media (min-width: @screen-sm-min) ( 
.options-panel ( 
display: block; 























} 
.options-panel-toggle ( 
display: none; 
} 
} 


(6) 这 些 规则 的 作用 如 下 : 


口 媒体 查询 保证 只 把 规则 应 用 到 小 中 大 视 口 ; 
口 第 一 条 规则 抵消 collapse 类 的 作用 ， 它 默认 是 隐藏 元 素 的 ; 
口 第 二 条 规则 隐藏 切换 按钮 。 


保存 并 刷新 ， 应 该 就 能 看 到 想 要 的 结果 了 。 
在 超 小 视 口 中 ， 选 项 列表 会 折 笃 起来， 但 切换 按钮 可 见 ; 
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Be 
n 


—  Dootstrappin' 


Home / Parent Category 


Product Category 
Name 





Narrow your selection EJ 
Product Title Longer Product Title 
This text describes the above This text describes the above 
product a little not too much product a little not too much 
but just enough or maybe a 

little more View this product © 








View this product © 





在 小 、 中 、 大 视 口中 ， 切 换 按 钮 隐藏 ， 选 项 列表 可 见 : 





Product Category Name 


Narrow your selection 


Clearance Sale 


View cisarance items 








Categories Product Title Longer Product Title Even Longer Product Title 
View this product © 
ew tha product © 
€ p “© 
Brands 
Exceptional Product Title Even Longer Product Title Product Title 





祝贺 你 ， 终 于 完工 啦 ! 
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5.5 


小 结 


本 章 ， 我 们 做 了 以 下 事情 。 

O 利用 Bootstrap 的 样式 快速 实现 了 面包 悄 、 页 面 标 题 和 分 页 导航 ， 并 根据 需要 进行 了 
定制 ; 

口 调整 了 Bootstrap 的 网 格 样式 ， 为 商品 创建 了 整齐 的 布局 ， 关 键 是 所 有 商品 的 高 度 要 
一 致 ; 

O 为 复杂 的 Clearance Sale 按钮 应 用 了 样式 ， 用 到 了 ebrandq-feature 这 个 红色 背景 ; 

口 利用 btn 类 的 样式 让 筛选 项 更 容易 点 击 或 触摸 ， 通 过 自 定义 满足 了 我 们 的 特殊 需求 ; 
O 使 用 Bootstrap 的 分 栏 类 ， 加 上 响应 式 调 整 ， 对 齐 了 筛选 项 列表 ， 而 且 适 合 多 视 口 ; 

口 在 自 定义 样式 表 中 借用 Font Awesome 样式 在 科 选 项 旁边 添加 复 选 框 ; 

口 设置 了 选项 面板 在 罕 视 口中 折 闭 ， 在 小 中 大 视 口 中 可 见 。 

再 次 祝贺 你 ! 现在 我 们 的 企业 网 站 集成 了 一 个 很 像样 的 电子 商务 页 面 。 

下 一 章 ， 我 们 更 上 一 层 楼 ， 创 建 一 个 单 页 营销 网 站 。 
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6.1 


单 页 营销 网 站 








我 们 已 经 掌握 了 很 多 使 用 Bootstrap 的 重要 技能 。 现 在 ， 是 时 候 拿 出 更 多 的 创意 来 帮助 客 
户 实现 他 们 全 方位 在 线 营 销 的 愿望 了 。 本 章 将 带领 大 家 做 一 个 漂亮 的 单 页 高 端 营销 网 站 。 
本 章 要 完成 以 下 任务 。 

口 一 个 大 型 介绍 性 传送 带 图 片 展示 区 ， 配 有 自 定义 的 响应 式 欢迎 信息 ; 

口 一 个 客户 留言 区 ， 显 示 为 带 标题 的 图 片 墙 ， 就 像 砖 垒 的 一 样 ; 
口 一 个 功能 清单 ， 使 用 大 号 Font Awesome 图 标 ; 

a 一 个 带 有 上 自 定 义 价目 表 的 注册 区 ; 

a 一 个 带动 态 滚动 的 ScrollSpy 导航 条 。 












































概况 

有 一 位 潜在 客户 联系 我 们 ， 她 深 深 地 爱 上 一 种 漂亮 的 网 站 ， 就 是 那 种 可 以 垂直 滚动 ， 以 
强烈 的 视觉 冲击 力 展示 商品 ， 最 后 还 有 一 个 突出 的 行动 召唤 按钮 的 单 页 网 站 。 她 想 让 你 
做 一 个 。 

这 位 客户 知识 渊博 、 目 光 如 炬 。 她 经 常 光 顾 http://onepagelove.com， 并 是 收集 了 一 堆 最 喜 
欢 的 功能 ， 包 括 : 
口 一 个 清新 ， 具 有 现代 美的 网 站 ; 

a 一 条 介绍 性 的 欢迎 语 ， 打 在 吸引 人 的 背景 图 片 之 上 ; 

a 一 个 高 效 的 商品 展示 区 ， 用 醒目 的 图 标 来 突出 ; 

口 精致 的 客户 留言 板 ， 深 具 视 觉 冲击 力 ; 

口 三 个 能 让 客户 一 目 了 然 的 价目 表 ， 方便 选择 ， 快 捷 注册 ; 

a 不断 沟通 ! 一 切 都 在 吸引 用 户 一 步 一 步 向 下 看 ,让 人 几乎 无 法 拒绝 点 击 最 后 的 注册 按钮 。 
为 了 保持 她 未 来 商品 的 神秘 感 ， 我 们 的 客户 没有 为 我 们 提供 实际 的 商品 或 服务 图 。 她 给 
了 我 们 一 个 设计 图 ， 设 计 图 中 使 用 了 占 位 图 片 。 

第 一 部 分 将 是 一 张 横贯 全 屏 的 高 清 图 片 ， 上 面 有 一 条 大 大 的 欢迎 语 ， 以 及 一 个 邀请 向 下 
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滚动 阅读 的 按钮 ， 如 下 图 所 示 : 





BIG 


Welcome Message 





ingenious marketing copy. And some more ingenious 


marketing copy. 








— E " | ee 


Features 


Feature 1 


Donec id elit non mi porta gravida 





at eget me ce dapibus 


jo 


tellus ac curs 


9 


Feature 4 


Donec id elit non mi porta gravida 


s commoc 








eget metus. Fusce c 





Leam more O 





第 二 部 分 将 列 出 商品 的 六 个 重要 功能 ， 分 成 三 栏 ， 并 配备 了 相应 的 图 标 ， 如 下 图 所 示 : 





Feature 2 


Donec id elit non mi porta gravida 





Feature 5 


Donec id elit non mi porta gravida 





9, 


Feature 3 
Donec sed odio dui. Cras justo 
odio, dapibus ac facilisis in, egestas 


eget quam 


Feature 6 


Donec sed odio dui. Cras justo 






odio, dapibus ac facilisis in, egesta: 


eget quam 
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第 三 部 分 展示 客户 的 赞誉 ， 有 图 片 ， 有 文字 ， 以 图 片 墙 形式 呈现 : 








Bootstrappin WELCOME FEATURES 


Impact 


SIGN UP 





Lorem ipsum dolor sit 
amet, consectetur 
adipiscing elit. Proin 
euismod, nulla pretium 
commodo ultricies 


Lorem ipsum dolor sit amet 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
Proin euismod, nulla 
pretium commodo ultricies 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
Proin euismod, nulla 


Lorem = =€ Lorem 

ipsum R 0 ! ipsum 

dolor sit i : E dolor sit 

amet elit. ^ amet ... 
> elit. 








第 四 部 分 也 是 最 后 一 部 分 ， 提 供 了 三 个 可 以 选 的 方案 ， 每 个 方案 对 应 相应 的 报价 ， 同 时 
在 视觉 上 突出 中 间 的 报价 方案 ， 如 下 图 所 示 : 








PREMIUM PLAN 
BASIC PLAN PRO PLAN 


$19 $39 





Feature 


Name Feature Name 
Feature Name 

Feature Name Feature Name 
Feature Name 

Feature Name Feature Name 
Feature Name 

Feature Name Feature Name 
Feature Name 

Name Name 
Name 





mE. 1. m 
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6.2 


6.3 

















目标 很 远大 。 当 然 没 问题 。 动 手 吧 





o 


初始 文件 


一 位 与 时 俱 进 的 客户 ， 所 以 她 最 后 还 要 求 我 们 的 方案 必须 完美 地 适应 平板 电脑 和 智 


本 章 项 目的 起 始 文件 位 于 06 Code Begin 文件 夹 中 。 与 本 书 前 几 章 的 项 目 一 样 ， 文 件 的 
核心 是 Bootstrap 3 LESS, JavaScript 和 按照 要 求 组 织 的 标记 ， 搭 配 了 HTML5 Boilerplate 





和 Font Awesome 图 标 字体 。 


项 目的 文件 夹 和 文件 结构 与 前 几 童 中 的 非常 类 似 。 下 面 我 们 就 简单 回顾 一 下 LESS 文件 。 





口 默认 的 Bootstrap 文件 位 于 /less/bootstrap/ 文 件 夹 。 

O Font Awesome 图 标 字体 的 LESS 文件 位 于 /less/font-awesome/。 

口 我 们 自 定 义 的 LESS 文件 就 在 less LRF, 以 下 划 线 开头 ,一 眼 就 能 
的 LESS 文件 如 下 。 























出 来 。 自 定义 


m  mainless: 这 是 导入 所 有 其 他 文件 的 主 文件 ， 应 该 把 它 编译 为 css/main.css; 




















m variables.less: 这 个 文件 基于 Bootstrap 定义 的 变量 新 增 了 一 些 变量 ; 


m navbarless: 这 个 文件 包含 导航 条 的 自 定 义 样 式 ; 
m page-contents.less: 这 个 文件 包含 页 面 内 容 区 的 自 定义 样式 ; 
m footerless: 这 个 文件 包含 页 脚 的 自 定 义 样 式 。 


在 前 几 章 的 项 目 中 ， 我 们 已 经 用 到 过 这 些 文件 了 。 
但 对 于 本 章 的 项 目 ， 这 些 文件 有 一 些 不 同 之 处 。 
口 我 针对 本 章 的 项 目 对 以 下 LESS 文件 作 了 一 些 改动 。 











m variables.less: 调整 了 一 些 变量 ， 特 别 是 针对 导航 条 的 变量 ， 我 特意 给 出 了 注释 说 明 ; 
m navbarless: 这 里 的 样式 用 于 限制 站 点 Logo 图 ,将 它 放 置 到 视线 的 开始 位 置 ， 并 与 











整体 网 格 保持 一 致 。 
O index.html 文件 中 的 大 部 分 标记 都 已 就 绪 。 





插入 到 了 标记 中 适当 的 位 置 。 
开始 之 前 ， 大 家 可 以 先 打 开 浏 览 器 看 看 当前 页 面 的 样子 。 








了 解 页 面 内 容 


在 浏览 器 中 打开 index.html， 可 以 看 到 下 面 列 出 的 组 件 。 当 然 ， 目 前 这 些 组 件 使 用 的 都 是 
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口 图 片 保存 在 img 文件 夹 中 ， 其 中 的 图 片 已 针对 Web 进行 了 缩放 、 裁 剪 和 优化 ， 也 已 经 
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6.4 











Bootstrap 的 默认 样式 ， 稍 后 我 们 会 添加 自 定 义 样 式 。 

口 固定 在 顶部 的 导航 条 ; 

O 带 一 句 大 号 欢迎 语 的 高 清 图 ; 

口 功能 介绍 ， 包 括 图 标 、 标 题 、 文 字 ， 分 三 栏 ; 

口 Impact 部 分 是 成 功用 户 的 照片 ， 占 位 文本 代表 他 们 的 赞誉 ; 

D Sign up Now! 部 分 是 三 张 价 目 表 ， 包括 Basic Plan, Premium Plan 和 Pro Plan， 每 个 下 
面 都 有 一 个 Sign up Now! 按 钮 ; 

口 页 脚 的 Logo; 

O 图 片 出 处 (按照 许可 给 出 每 张 图 片 的 来 源 )。 


要 查看 标记 ， 请 用 编辑 器 打开 index.html。 在 后 面 的 几 步 中 ， 我 们 逐渐 熟悉 这 些 标记 。 


























调整 导航 条 


本 章 的 项 目 包 含 一 个 固定 在 顶部 的 导航 条 , 链接 在 悬 停 和 激活 状态 会 有 显著 的 颜色 变化 。 
为 此 ， 我 通过 设置 相应 的 变量 应 用 了 一 些 样式 。 下 面 我 来 一 一 指出 来 ， 然 后 我 们 再 探讨 
怎么 调整 标记 。 

如 前 所 述 ，less/_variables.less 文件 是 以 Bootstrap 的 variables.less 文件 为 基础 的 。 在 这 个 
文件 里 ， 我 像 前 几 章 一 样 ， 修 改 了 灰色 变量 。 可 以 在 文件 一 开头 看 到 这 些 变量 。 
接着 我 又 调整 了 导航 条 的 变量 ， 涉 及 它 的 高 度 、 外 边 距 、 颜 色 、 悬 停 颜色 : 

// Basics of a navbar 


Gnavbar-height: 56px; 
Gnavbar-margin-bottom: 0; 






































// Navbar links 


Gnavbar-default-link-color: Gnavbar-default-color; 
Gnavbar-default-link-hover-color: #fff; 
@navbar-default-link-hover-bg: @gray; 
@navbar-default-link-active-color: 4fff; 
Gnavbar-default-link-active-bg: QGgray-dark; 


此 外 ， 也 调整 了 导航 条 切换 按钮 的 变量 : 


// Navbar toggle 

Gnavbar-default-toggle-hover-bg: transparent; 
Gnavbar-default-toggle-icon-bar-bg: Ggray-lighter; 
Gnavbar-default-toggle-border-color: transparent; 


最 后 ,去 掉 了 导航 条 切换 按钮 及 其 他 元 素 的 圆 角 。 只 要 把 三 个 abordqer-radqius- 变 量 的 
值 改 为 0 即 可 : 


@border-radius-base: 0; // was 4px 
@border-radius-large: 0; // was 6px 








Dnnnnnnnnnnnnnnnnnhttp:,//bloo.sina.comcan uy 3283485963 





6.5 


Gborder-radius-small: 0; // was 3px 


除了 这 些 自 定义 变量 ， 我 还 稍微 修改 了 一 下 _navbarless。 修 改 的 地 方 主要 是 .navbar- 
brand 的 内 边 距 ， 以 便 与 Logo 图 片 保持 一 定 间 距 : 





[ 原来 的 代码 被 注释 掉 了 ， 新 添加 的 代码 后 面 又 加 了 注释 。 


.navbar-brand ( 
float: left; 
// padding: QGnavbar-padding-vertical Gnavbar-padding-horizontal; 
padding: 12px 30px 0 15px; // to allow for logo image 


此 外 ,还 自 定义 了 导航 条 展开 时 的 列表 项 , 添加 了 左 、 右 内 边 距 ， 并 把 文字 转换 成 大 写 : 


// Uncollapse the nav 
@media (min-width: @grid-float-breakpoint) { 





e li ( 


float: left; 

»atí 
padding-top: ((8navbar-height - Gline-height-computed) / 2); 
padding-bottom: ((8navbar-height - Gline-height-computed) / 2); 


padding-left: 24px; // added 
padding-right: 24px; // added 
text-transform: uppercase; // added 


) 
以 上 调整 组 合 到 一 起 ， 就 得 到 了 如 下 结 


Bootstrappin' FEATURES MPACT SIGN UP 


下 面 我 们 就 从 高 清 图 和 大 号 欢迎 语 开始 。 














定制 高 清 图 
本 节 ， 我 们 要 自 定义 高 清 图 ， 显 示 客 户 的 大 号 欢迎 语 ， 同 时 要 对 标记 进行 一 番 调 整 。 包 
括 添加 大 背景 图 ， 放 大 欢迎 语 ， 然 后 调整 其 在 多 视 口 中 的 外 观 。 

在 index.html 中 ， 找 到 如 下 标记 : 


«1!-- INTRO SECTION =- 
«section id-"welcome" class-"jumbotron"» 














«div class-"container"» 
«hi1»«strong»Big«/strong» Welcome Message</h1> 


«p»Ingenious marketing copy. And some «em»more«/em» ingenious 
marketing copy.«a href="#features" class-"btn btn-lg btn-primary 
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pull-right"»Learn more «span class-"icon fa fa-arrow-circle-down"-» 
«/span»«/a»«/p» 
«/div» 
«/section» 


当前 ， 在 应 用 了 Bootstrap 默认 样式 后 ， 结 果 如 下 图 所 示 : 











Big Welcome Message 


Ingenious marketing copy. And some more ingenious marketing copy. Learn more © 


























而 在 我 们 完成 对 高 清 图 的 调整 之 后 ， 结 果 应 该 是 这 样 的 : 


BIG 


Welcome 


Message 


ingenious marketing copy. And some more ingenious 
marketing copy. 


Leam more © 








首先 扩大 显示 区 的 高 度 ， 把 高 清 图 放 进 去 。 
(1) 在 编辑 器 中 打开 自 定义 的 LESS 文件 less/_page-content.less。 我 们 要 用 这 个 文件 自 定义 














很 多 页 面 的 细节 。 
(2) 现在 我 们 设置 welcome 部 分 的 高 度 、 背 景 颜色 和 字体 颜色 ,同时 也 为 按钮 添加 一 些 
上 外 边 距 : 


#welcome { 
height: 300px; 
background-color: #191919; 
color: #EEE; 
.btn ( 
margin-top: 16px; 
} 
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(3) 保存 修改 ， 编 译 为 CSS， 刷 新 浏览 器 ， 应 该 可 以 看 到 如 下 结果 : 








Big Welcome Message 


Ingenious marketing copy. And some more ingenious marketing copy. 


Learn more O 








接 下 来 ， 我 们 使 用 媒体 查询 为 中 大 屏幕 添加 背景 图 片 (根据 目前 Bootstrap 媒体 查询 默认 
的 断 点 值 ， 大 屏幕 指 991px 以 上 )。 





、 ”如 果 愿 意 , 也 可 以 打开 _variables.less, 搜索 并 重 温 一 下 Bootstrap 的 媒体 
查询 交 量 ， 比 如 Qscreen-xs 、Qscreen-sm、@Qscreen-md 和 


Gscreen-1lg.; 


(1) 利用 LESS， 可 以 在 #welcome W E Poco — ANEA. Ex E pei), 
将 subway-906x600.jpg 指定 为 背景 。 对 这 里 的 断 点 来 说 ， 这 张 图 片 已 经 足够 大 了 , 但 
加 载 速度 相对 也 很 快 : 


#welcome ( 


@media (max-width: Gscreen-sm-max) ( 
background: 4191919 url('../img/subway-906x600.jpg') 
center center no-repeat; 
) 
} 


D 保存 文件 ， 编 译 为 CSS， 刷 新 浏览 器 。 应 该 看 到 背景 图 片 出 现 了 ,但 只 会 在 屏幕 宽度 
为 911px 或 更 小 的 时 候 才 会 出 现 : 




















Big Welcome Message 


Ingenious marketing cdpy And some more 
ingenious marketing copy. 


Learn more Q < 
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(3) 下 面 我 们 要 扩展 平板 大 小 视 口 下 高 清 图 的 高 度 。 为 此 ， 要 使 用 断 点 @screen-sm-min 
写 一 个 媒体 查询 ， 把 #welcome 元 素 的 高 度 变 成 480px: 
@media (min-width: @screen-sm-min) ( 


height: 480px; 
} 





(4) 保存 ， 编 译 ， 然 后 刷新 浏览 器 。 应 该 看 到 视 口 在 768~991px 之 间 时 ， 高 清 图 的 高 度 会 
变 成 480px， 如 下 图 所 示 : 


mm 
a 


Big Welcome Messagf -| 


Ingenious marketing copy. And some. more ingenious marketing coi | i 
3 a 
A 


E 








(5) 接 下 来 考虑 中 大 (992px 以 上 ) 视 口 ， 此 时 把 高 清 图 变 成 540px 高 。 在 这 个 宽度 下 ， 就 
要 使 用 更 大 的 背景 图 片 sabway-1600x1060.jpg, 同时 把 background-size EN cover: 





@media (min-width: Gscreen-md-min) ( 
height: 540px; 
background: #191919 url('../img/subway-1600x1060.jpg') 
center center no-repeat; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 


} 








(6) 有 了 这 些 样 式 ， 当 视 口 变 大 时 ， 就 会 显示 1600px 宽 的 背景 图 片 了 。 而 且 在 现代 的 浏 
Wtr, EFA Internet Explorer 9 中 ， 背 景 图 片 还 会 拉 伸 以 填 满 #welcome 元 素 。 
(7) 保存 ， 编 译 ， 然 后 测试 一 下 。 没 问题 ， 所 有 上 断 点 基本 都 涵盖 了 。 














就 会 显示 #191919 的 背景 色 。 这 种 情况 不 会 影响 太 多 用 户 , 但 的 确 存在 


. ”注意 ,在 Internet Explorer 8 中 ， 当 视 口 宽度 超过 1600px 时 ， 图 片 左 右 
这 个 问题 ， 只 是 问题 不 大 而 已 。 





接 下 来 ， 我 们 为 欢迎 语 添加 样式 ， 使 其 突出 出 来 。 
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调整 欢迎 语 
客户 希望 高 清 图 上 的 欢迎 语 超 级 大 。Bootstrap 的 高 清 图 样式 把 原 字号 增 大 了 1.5 fi, 我 
们 还 要 再 增 大 一 些 。 还 要 在 宽屏 幕 中 约束 欢迎 语 的 宽度 , 并 在 其 下 方 衬托 一 个 半 透 明 的 
盒子 。 
目前 的 结果 在 超 小 屏幕 中 表现 已 经 很 好 了 : 











Bootstrappin 


Big Welcome 
Message^ 
Ingenious marketing copy. And some ý 


more ingenious marketing copy. 


Learn more © 








不 过 , 还 是 可 以 改进 一 些 。 那 就 是 在 文本 底下 衬托 一 个 半 透 明 的 黑 盒 子 。 下 面 就 来 试 试看 。 
(1) 在 index.html 中 , 高 清 图 container 类 内 部 , 添加 一 个 新 的 类 为 welcome-message 
的 div 元 素 ， 包 含 ni 标题 和 段落 : 


«section id-"welcome" class-"jumbotron"» 
«div class-"container"'» 
«div class-"welcome-message"» 
«hi»«strong»Big«/strong» Welcome Message</h1> 
«p»Ingenious marketing copy. And some «em»more«/em» ingenious marketing copy. 
«a href="#features" 
class="btn btn-lg btn-primary pull-right"»Learn more 
<span class="icon fa fa-arrow-circle-down"></span></a></p> 
</div><!-- /.welcome-message --> 
</div> 
</section> 


Q) 现在 为 这 个 aiv 添加 样式 ,分 以 下 几 步 : 

口 使 用 HSLA 添加 半 透 明 黑 色 背 景 ; 

口 将 其 设 为 绝对 定位 , 并 通过 将 上 、 下 、 左 、 右 设置 为 0, 将 其 拉 伸 至 与 高 清 图 一 样 大 小 ; 
口 使 用 #welcome 将 高 清 图 设置 为 相对 定位 ， 以 便 确 定 欢 迎 语 的 位 置 ; 
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口 给 欢迎 语 添加 内 边 距 ; 
口 使 用 原 有 的 strong 标签 把 “Big” 变 成 大 写 ， 同 时 增 大 字号 。 


#welcome ( 





position: relative; 
.welcome-message { 
background-color: hsla(0,0,12,0.4); 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
padding: 30px 40px; 
strong ( 
font-size: 1.5em; 
text-transform: uppercase 


} 


} 


(3) 保存 文件 ,编译 CSS， 然 后 刷新 浏览 器 。 应 该 能 看 到 背景 变 暗 了 ， 文 本 在 这 个 深 色 背 
景 上 也 更 加 引 人 注 目 ， 如 下 图 所 示 : 











Bootstrappin 


BIG Welcome 


Message “ 


Ingenious marketing copy. And some 
more ingenious marketing copy. 


Learn more © 





(4) 下 一 步 , 要 考虑 @screen-sm 断 点 。 我 们 已 经 为 这 个 断 点 写 过 媒体 查询 ， 当 时 是 用 来 
把 高 清 图 提高 到 480px。 就 在 这 个 断 点 内 ， 我 们 要 添加 一 些 规则 ， 完 成 以 下 任务 : 




















a 把 高 清 图 的 container 设置 为 相对 定位 ,使 其 成 为 新 的 定位 参照 点 ， 以 便 我 们 从 
上 方 和 左 侧 向 内 缩小 欢迎 语 的 盒子 ; 
a 右 侧 向 内 缩小 2096; 
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口 将 底 边 设置 为 auto， 以 便 盒子 能 收缩 适应 内 容 ; 
口 将 “Big” 设 置 为 块 级 元 素 ， 单 独 显示 在 一 行 上 。 


Gmedia (min-width: Gscreen-sm-min) ( 
height: 480px; 
.container ( 

position: relative; 
} 
.welcome-message { 
right: 20%; 
bottom: auto; 
strong { 
display: block; 
} 











} 
} 


(5) 保存 ， 编 译 并 刷新 浏览 器 。 应 该 看 到 下 图 所 示 的 结 














BIG 


Welcome 


Message 


ingenious marketing copy. And some more ingenious 
marketing copy. 


Learn more © 








(6) 最 后 ， 我 们 再 针对 中 大 视 口 作 调整 。 在 中 大 视 口 中 ,我 们 想 限 制 一 下 欢迎 语 盒子 的 宽 
度 。 这 次 要 用 到 之 前 针对 断 点 ascreen-md-min 创建 的 媒体 查询 : 
Gmedia (min-width: Gscreen-md-min) ( 
vweldondomsWdage 1 
right: 50%; 


) 
j 


C) 保存 文件 ， 编 译 到 CSS， 然 后 刷新 浏览 器 。 在 中 大 视 口 中 应 该 看 到 下 图 所 示 的 结果 : 
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Welcome 


Message 


Ingenious marketing copy. And some more 
ingenious marketing copy. 


Learn more O 








使 命 达 成 ! 

我 们 自 定义 的 高 清 大 图 就 此 完成 ， 满 足 了 客户 显示 超大 欢迎 语 的 要 求 ， 同 时 还 能 适应 平 
板 、 手 机 等 设备 的 屏幕 。 关 键 是 我 们 在 此 运用 了 移动 设备 优先 的 原则 。 

下 面 就 是 功能 列表 。 











美化 功能 列表 
包含 图 标 、 标 题 和 简短 文字 描述 的 功能 列表 ， 目 前 看 起 来 是 这 样 的 : 








Features 


e u e, 
Feature 1 Feature 2 Feature 3 
Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget Donec sed odo dui. Cras justo odio, dapibus 


metus. Fusce dapibus, tellus ac cursus 





usce dapibus, tellus ac cursus ac facilisis in, egestas eget quam 
commodo. commodo 


Feature 4 


Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 


E 至 


Feature 5 Feature 6 


Donec id elit non mi porta gravida at eget Donec sed odio dui. Cras justo odio, dapibus 
metus. Fusce dapibus, tellus ac cursus ac facilisis in, egestas eget quam 
commod 














我 们 的 目标 是 增 大 图 标 ， 居 中 对 齐 文本 ， 然 后 平整 网 格 而 已 。 
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看 一 下 功能 列表 的 标记 结构 : 


<section id="features"> 
<div class="container"> 
<h1>Features</h1> 
<div class="row"> 
«div class="features-item col-md-4"> 
«span class="icon fa fa-cloud"></span> 
<h2>Feature 1</h2> 
<p>Donec id elit non mi porta gravida at eget metus. Fusce 
dapibus, tellus ac cursus commodo. </p> 
</div> 


每 个 功能 都 有 自己 的 图 标 、 标 题 和 段落 ,包含 在 自己 的 div 标签 中 ,这 
> 个 标签 有 两 个 类 : features-item fe col-md-4, 





知道 了 标记 结构 ， 接 下 来 就 可 以 写 样式 了 。 


(1) 在 编辑 器 中 打开 的 _page-contents.less 文件 中 ， 新 开辟 一 块 ， 并 添加 注释 ， 表 明 是 功能 
区 的 样式 。 


// Features Section 
#features ( 


} 


(2) 首先 针对 .features-item 部 分 , 居中 文本 , 添加 内 边 距 ,并 设 定 高 度 以 避免 浮动 的 
功能 项 互相 交错 ， 同 时 将 .icon 字体 增 大 为 90px: 


#features ( 
.features-item ( 
text-align: center; 
padding: 20px; 
height: 270px; 
.icon ( 

font-size: 90px; 
} 
J 
} 


(3) 保存 文件 ， 编 译 为 CSS， 然 后 刷新 浏览 器 。 在 中 等 宽度 视 口 中 应 该 看 到 下 图 所 示 的 


AUR: 
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Features 


Feature 1 


Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 
commodo. 


D 


Feature 4 


Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 
commodo 


Feature 2 


Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 


Feature 5 


Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 


D 


Feature 3 


Donec sed odio dui. Cras justo odio, dapibus 


ac facilisis in, egestas eget quam 
commodo. 


业 ED 


Feature 6 


Donec sed odio dui. Cras justo odio, dapibus 


ac facilisis in, egestas eget quam. 
commodo. 








不 错 ! 


(4) 下 面 针 对 小 视 口 调整 功能 列表 。 当 前 


， 每 个 .features-item 都 有 类 col-mdqa-4， 而 


我 们 希望 在 小 屏幕 中 功能 列表 显示 为 下 图 所 示 的 两 栏 ， 相 应 地 要 添加 类 col-sm-6: 





Features 


Feature 1 


D 


Feature 3 


facilisis in, egestas eget quam. 


$ 


Feature 5 


Fusce dapibus, tellus ac cursus commodo. 





Donec id elit non mi porta gravida at eget metus. 
Fusce dapibus, tellus ac cursus commodo. 


Donec sed odio dui. Cras justo odio, dapibus ac 


Donec id elit non mi porta gravida at eget metus. 


Feature 2 


Donec id elit non mi porta gravida at eget metus. 
Fusce dapibus, tellus ac cursus commodo. 


D 


Feature 4 


Donec id elit non mi porta gravida at eget metus. 
Fusce dapibus, tellus ac cursus commodo. 


Feature 6 


Donec sed odio dui. Cras justo odio, dapibus ac 
facilisis in, egestas eget quam. 








(5) 再 小 一 些 ， 在 超 小 视 口中 ， 功 能 项 会 自己 变 成 一 栏 。 


(6) 可 是 ， 在 超 小 








PEERS E, BI 500—767px 的 时 候 ， 一 栏 的 布局 会 导致 文本 描述 大 宽 : 
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Feature 1 


Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo. 











CT) 解决 这 个 问题 需要 再 添加 一 个 媒体 查询 , 为 .features-item 设置 最 大 宽度 , 同时 应 
用 Bootstrap 的 .center-block() 混 人: 


*features { 
.features-item ( 


emedia (max-width: Gscreen-xs-max) ( 


max-width: 320px; 
.center-block(); 


} 


} 
在 bootstrap 文件 夹 中 的 mixins.less 中 ， 可 以 找到 .center-block()。 
S 这 个 混入 会 对 元 素 应 用 自动 的 左右 外 边 距 。 





(8) 有 了 以 上 限制 ，. features-item 元 素 在 任何 视 口 中 都 会 保持 理想 的 宽度 了 ! 





Features 


Feature 1 


Donec id elit non mi porta gravida at eget metus. Fusce 
dapibus, tellus ac cursus commodo. 


Feature 2 


Donec id elit non mi porta gravida at eget metus. Fusce 
dapibus, tellus ac cursus commodo. 


e, 


Feature 3 


Donec sed odio dui. Cras justo odio, dapibus ac facilisis in 
egestas eget quam. 
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此 时 ， 我 们 又 满足 了 客户 对 其 网 站 这 一 部 分 的 要 求 。 下 一 步 可 以 考虑 用 户 评论 区 了 。 


装饰 用 户 评论 区 


接 下 来 的 一 部 分 叫 “Impact”， 用 来 展示 成 功用 户 的 评论 。 在 这 一 部 分 ， 我 们 看 到 的 是 成 
功用 户 的 笑脸 ， 还 有 他 们 对 我 们 客户 商品 的 赞美 之 词 。 这 一 部 分 开始 的 标记 结构 如 下 : 


«1-- IMPACT SECTION ==> 
«section id-"impact"» 
«div class-"container"» 
<h1>Impact</h1> 
<div class="reviews"> 


每 一 条 评论 都 像 下 面 这 样 使 用 hrevievw 微 格式 标记 : 


«div class="hreview review-item-1 thumbnail"> 
<img src="img/smilingl-by-RomainGuy-600x900.jpg" alt="Customer Photol"> 
<div class="caption"> 
<blockquote class="description"><p>Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin euismod, nulla pretium commodo 
ultricies«/p»«/blockquote» 
«p class-"reviewer"»Smiling Customeri1«/p» 
«/div»«!-- /.caption --» 
«/div»«!-- /.hreview --» 


| 要 了 解 nreview 微 格式 的 信息 ， 请 访问 http://microformats.org/wiki/ | 


























hreview-examples。 


为 了 方便 布局 和 添加 样式 ， 我 们 使 用 了 Bootstrap 的 thumbnail 类 结构 ， 这 个 结构 有 以 
下 好 处 : 

O 在 每 条 评论 的 父 元 素 中 ， 我 们 都 会 在 hreview 类 旁边 再 添加 一 个 thumbnail 类 ; 

口 评论 内 容 ， 包 括 引 用 的 话 和 评论 者 的 名 字 ， 都 包含 在 div class="caption" 中 。 


这 种 缩 略 图 (thumbnail ) 和 说 明 (caption ) 结构 对 每 条 评论 给 出 了 整体 封装 。Bootstrap 
的 缩 略 图 样式 就 是 用 来 在 我 们 期 望 的 布局 中 限制 图 片 和 说 明 比 例 的 。 

当前 这 样 的 结构 ， 无 论 从 语义 角度 ， 还 是 从 表达 角度 ， 都 为 我 们 提供 了 很 好 的 基础 。 
我 们 知道 ， 用 户 评论 区 最 终 要 做 成 一 面 图 片 增 的 样子 ， 图 片 有 横 也 有 坚 。 为 了 让 照片 中 
的 脸 部 都 露出 来 ， 同 时 有 地 方 爱 加 评论 文字 ， 我 们 把 所 有 图 片 都 处 理 成 了 同样 宽 。 


没有 Bootstrap 的 布局 类 ， 这 些 图 片 就 从 上 到 下 依次 排列 。 如 果 把 窗口 宽度 缩小 到 大 约 
320~400px， 可 以 看 到 它们 垂直 排列 成 一 栏 时 的 样子 ， 如 下 图 所 示 : 
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Lorem ipsurn dolor sit amet, consectetur adipiscing 
elit. Proin euismod, nulla pretium commodo ultricies 


Smiling Customer 








在 针对 大 视 口 调整 布局 之 前 ， 我 们 先 来 为 说 明 元 素 添加 样式 。 


6.7.1 定位 及 美化 说 明 


我 们 要 把 说 明 元 素 放 到 对 应 用 户 照片 的 上 面 。 
(1) 在 打开 的 _page-contents.less 文件 中 ， 添 加 针对 #impact 部 分 的 注释 : 


// Impact Section 
#impact ( 
} 


Q) 为 每 个 .hreview 元 素 添 加 必要 的 样式 ,为 下 一 步 定 位 打下 基础 。 这 里 添加 了 相对 定 
位 、 内 边 距 ， 去 掉 了 Bootstrap 缩 略 图 默认 的 边框 ， 


d$impact ( 
.hreview ( 
position: relative; 
padding: 0 10px; 
border: none; 


} 
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(3) 现在 可 以 为 说 明 元 素 添 加 样式 了 。 我 们 要 在 每 张 图 片上 添加 半 透 明 的 背景 ， 并 将 其 绝 
对 定位 到 图 片 底部 : 
.hreview { 
ee { 
position: absolute; 
top: auto; 


left: 10px; 
right; 10px; 
bottom: 0; 


line-height: 1.1; 
background: hsla(0,0,10$,0.55); 


H 
(4) 接着 ， 去 掉 blockquote 和 .reviewer 元 素 不 必要 的 外 边 距 和 内 边 距 ， 按 我 们 的 需 
要 重新 设置 : 


#impact .hreview { 
.Caption { 
blockquote, 
.reviewer { 
margin: 0 6px; 


padding: 0; 
} 


(5) 下 面 就 是 评论 文字 了 ,我 们 要 指定 外 边 距 、 边 框 、 字 体 、 字 号 和 颜色 : 


blockquote ( 
margin-top: 4px; 
border: none; 
font-family: Gfont-family-serif; 
font-size: Gfont-size-large; 
color: HVfff; 




















} 


(6) 下 面 再 给 评论 者 的 名 字 指 定 样 式 ， 应 该 定位 到 评论 内 容 之 下 : 


























.reviewer { 
margin-top: 2px; 
margin-bottom: 4px; 
text-align: right; 
color: Ggray-lighter; 


忘 了 把 对 应 的 花 括号 加 上 。 

















C) 保存 文件 ， 编 译 为 CSS， 刷 新 浏览 器 ， 应 该 看 到 下 图 所 示 的 结 
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Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Proin euismod, nulla pretium 
commodo ultricies 











Smiling Customer1 





向 下 深 动 ， 再 看 看 其 他 评论 怎么 样 。 





Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Proin euismod, nulla 
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6.7.2 ”调整 说 明 元 素 的 位 置 





看 看 每 张 图 片上 的 可 用 空间 ， 再 在 不 同 视 口 宽度 下 检查 一 下 响应 式 网 格 中 看 加 文本 的 变 
化 情况 。 你 会 发 现 自己 需要 针对 每 个 说 明 元 素 设 置 样式 ， 以 保证 对 相应 图 片 位 置 最 合适 。 











这 就 是 review-item-1、review-item-2 这 些 类 可 以 派 上 用 场 的 地 方 。 通 过 它们 就 可 
以 针对 每 张 图 片 分 别 设 置 样式 了 。 在 _page-contents.less 文件 中 添加 如 下 代码 : 





#impact ( 
.review-item-4 
top: 0; 
left: 62$; 
right: 10px; 


bottom: auto; 


.reviewer ( 


margin-top: 
text-align: 


} 
} 
.review-item-5 
top: 0; 
left: 17$; 
right: 10px; 


bottom: auto; 


} 
J 


.caption { 


6px; 
left; 


.caption ( 


上 面 的 规则 针对 特定 的 评论 调整 了 说 明 元 素 的 位 置 ， 得 到 了 如 下 结果 : 








Lorem 
ipsum dolor 
sit amet 
Smiling 
Customer4 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 


euismod, nulla pretium 
commodo ultricies 
Smiling Customer5 
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6.7.3 


1E 06 Code END 文件 夹 中 的 less/ page-contents.less 文件 中 , 你 会 发 现 从 第 132 行 以 后 都 
是 我 添加 的 针对 每 个 评论 的 特殊 样式 。 看 完 这 个 结果 ， 没 准 你 会 不 满意 我 的 调整 ， 位 置 
啊 ， 样 式 啊 ， 都 可 能 不 满意 。 没 关系 ， 你 自己 可 以 动手 做 出 自己 满意 的 ! 

下 面 我 们 再 考虑 图 片 墙 布 局 。 第 一 步 就 是 指定 元 素 的 宽度 , 这 时 需要 利用 Bootstrap 的 网 格 类 。 





添加 Bootstrap 的 网 格 类 
利用 Bootstrap 的 网 格 类 ,可 以 使 用 col-sm-6 在 小 屏幕 中 实现 两 栏 布局 ,使 用 co1-ma-4 
在 中 大 屏幕 中 实现 三 栏 布局 。 

每 个 hreview 元 素 的 类 结构 都 将 如 下 面 这 行 标记 所 示 : 

«div class-"hreview review-item-1 thumbnail col-sm-6 col-md-4"- 

给 每 个 评论 都 添加 这 两 个 类 。 

保存 文件 ， 编 译 并 刷新 浏览 器 。 拉 伸 、 收 缩 浏 览 器 窗口 ， 观 察 在 小 视 口 和 中 视 口 中 布局 
的 变化 情况 。 可 以 看 到 类 似 下 图 所 示 的 结果 : 


























Impact 


Lorem ipsum dolor sit amet, 
consectetur adipiscing eit. 
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在 中 大 视 口中 ， 可 以 看 到 类 似 下 面 的 结果 : 





Impact 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
nulla pretium commodo 
es 


Lorem ipsum Golor sit amet 


So Customers2 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
euismod, nulla 


| Lorem ipsum dolor sit amet, 


consectetur adipiscing elit. Proin 
f] euismod, nulla pretium commodo 
ultricies | 














在 前 面 讨论 功能 列表 的 时 候 ， 我 们 说 过 ， 如 果 网 格 项 高 度 不 一 ， 它 们 就 会 穿插 ， 不 会 形 
成 整洁 的 网 格 。 为 此 我 们 给 每 个 元 素 设 定 了 固定 的 高 度 。 但 在 这 里 ,我 们 希望 每 个 评论 
的 高 度 不 同 。 既 然 还 需要 创建 图 片 墙 ， 那 就 得 借助 一 点 JavaScript. 








6.7.4 下 载 并 链接 JavaScript 插 件 


要 实现 图 片 墙 效果 ,就 得 利用 JavaScript 计算 可 用 空间 , 然后 用 最 合适 的 图 片 去 填充 相应 
空间 ， 最 终 让 高 度 不 同 的 块 形成 整齐 的 拼 贴 效果 。 
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6.7.5 


为 了 实现 我 们 想 要 的 效果 ， 可 以 利用 一 个 叫 Masonry 的 JavaScript 插件 ， 它 是 由 David 

DeSandro 开发 并 维护 的 。 

(1) 在 浏览 需 中 打开 http:/masonry.desandro.com 

(2) 下 载 压缩 后 直接 可 以 使 用 的 masonry.pkgd.min.js; 

(3) 用 编辑 器 打开 masonry.pkgd.min.js， 复 制 其 全 部 内 容 ; 

(4) 在 项 目 文件 中 , 打开 js/plugins.js， 然 后 将 复制 的 代码 粘贴 到 Bootstrap 的 JavaScript fX 
但 后 面 ; 

(5) 保存 并 关闭 这 个 文件 。 

我 们 知道 , plugins.js 文件 已 经 链接 到 index.html 了 。 因 此 , 以 上 几 步 也 就 把 插件 的 脚本 链 

接 到 了 页 面 。( 虽然 这 样 增 大 了 脚本 文件 ， 但 却 没 有 增加 HTTP 请 求 。) 




















初始 化 Masonry 插 件 
下 面 我 们 要 使 用 HTML 属性 来 初始 化 Masonry 插件 。 











Æ T f Masonry 插件 , 可 以 参考 它 的 文档 : http;//masonry.desandro.com/Z 
一 getting-started 。 
在 index.html 文件 中 ， 进 行 如 下 修改 。 
(1) Zi div class="reviews "添加 js-masonry 类 , 这 是 所 有 评论 的 父 元 素 。 这 样 插件 
就 会 知道 要 在 哪里 起 作用 。 
(2) 然后 ， 在 同一 个 元 素 上 ， 添 加 一 个 数据 属性 ， 指 定 要 拼 贴 的 项 。 结 果 标 记 如 下 : 


«div class-"reviews js-masonry" data-masonry-options-'("itemSelector": 
".hreview" }'> 


| 注意 data-masonry-options attribute 的 值 使 用 的 单 双 引 号 , TEA | 














错 : data-masonry-options='{ "itemSelector": ".hreview" }'o 





这 样 就 可 以 告诉 插件 哪些 元 素 参 与 拼 贴 了 。 这 里 指定 的 是 hreview 类 (当然 使 用 
thumbnail 也 一 样 )。 


(3) 保存 index.html 并 刷新 浏览 絮 。 你 会 发 现 原来 存在 于 图 片 间 的 空白 一 下 子 就 消失 了 。 
小 视 口中 拼 贴 效果 (我们 使 用 col-sm-6 指定 了 两 栏 布局 ) 如 下 图 所 示 : 
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Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
Proin euismod, nulla pretium 
commodo ultricies 


Lorem 
ipsum dolor 
sit amet 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
euismod, nulla pretium commodo 
ultricies 











而 下 图 是 在 中 大 视 口 中 的 三 栏 效 果 : 
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Impact 


Lorem ipsum dolor sit amet, 

consectetur adipiscing elit. Proin 

euismod, nulla pretium commodo 
m" 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
euismod, nulla 








多 拖 动 浏览 需 窗 口 ， 缩 小 ， 放 大 ， 经 过 各 个 断 点 试 一 试 。 观 察 一 下 评论 的 图 片 墙 在 两 栏 
和 三 栏 间 切换 时 的 动画 效果 ! 


6.7.6 UTER 
现在 离 客 户 要 求 的 结果 已 经 非常 近 了 。 可 是 ， 我 们 仍然 有 一 个 问题 没有 解决 ， 就 是 可 能 
没有 准确 地 检测 到 图 片 大 小 。 在 两 栏 的 小 型 布局 中 ，Smiling Customers 会 稍微 长 出 一 点 
来 。 而 在 中 大 型 三 栏 布局 中 ， 这 张 图 片 伸 出 得 更 长 了 。 我们 可 以 提 ， 说 把 这 张 图 片 换 掉 。 
但 客户 说 她 非常 喜欢 这 一 张 ， 不 能 换 。 所 以 我 们 还 得 想 办 法 让 它 在 适合 整体 布局 。 
好 在 ， 我 们 获得 了 许可 ， 可 以 做 一 些 剪裁 。 换 句 话 说， 实在 不 行 ， 可 以 不 上 其 他 用 户 的 
照片 。 这 样 我 们 就 可 以 做 点 什么 了 ， 先 从 修复 三 栏 布局 开始 : 
(1) 在 打开 的 _page-contents.less 中 ， 添 加 一 行 注释 : 


// Cutting and trimming for masonry layout 
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(2) 接 下 来 ,我 们 要 在 多 个 断 点 进行 多 处 调整 。 但 我 们 不 必 新 写 一 个 媒体 查询 ， 而 是 可 以 
利用 LESS HREJ, TEE E TES impact 选择 符 中 ,在 第 一 个 查询 中 , 我 
们 隐藏 Smiling Customer4， 如 下 所 示 : 


#impact { 
Gmedia (min-width: @screen-md-min) ( 
.review-item-4 ( 
display: none; 
} 
} 


(3) 保存 文件 ,编译 CSS， 然 后 刷新 浏览 器 。 此 时 的 三 栏 布局 应 该 完美 对 齐 了 ,看 看 下 面 
的 屏幕 截图 吧 : 




















Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
euismod, nulla pretium commodo 
ultricies 


Lorem ipsum dolor sit amet 
SOY Cugtormers- 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 

i euismod, nulla pretium commodo 
ultricies 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
euismod, nulla 














下 面 接着 调整 两 栏 布局 。 


| 两 栏 布局 中 的 Smiling Customer5 大 约 只 长 出 了 20px， 因 此 这 里 只 需要 | 


把 图 片 从 底部 切 掉 一 点 就 行 了 。 


我 们 只 想 在 小 视 口中 切 掉 一 点 图 片 ， 不 包括 超 小 视 口 ， 也 不 包括 中 大 视 口 。 为 此 ， 需 要 
在 媒体 查询 中 同时 列 出 最 小 和 最 大 宽度 。 在 第 一 个 媒体 查询 后 面 添 加 下 面 这 个 媒体 查询 ， 
实现 所 需 效果 的 代码 如 下 所 示 : 
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Gmedia (min-width: @screen-sm-min) and (max-width: Gscreen-sm-max) { 
.review-item-5 ( 
height: 474px; 
overflow: hidden; 
img ( 
width: 100$; 
} 
} 
} 


这 几 行 代码 完成 了 以 下 几 件 事 。 
口 将 review-item-5 的 高 度 精确 设置 为 474px， 以 便 它 与 相 邻 图 片 底 端 对 齐 。 
口 对 于 超 高 溢出 部 分 ， 隐 藏 之 。 
口 强制 图 片 宽度 填 满 可 用 空间 。 


结果 非常 棒 ， 看 看 下 面 的 屏幕 截图 吧 : 








Impact 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 

Proin euismod, nulla pretium 
commodo ultricies 


Smiling Customert 


Lorem 
ipsum dolor 
sit amet 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 
euismod, nulla 


Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Proin 

ann commodo 
ultricies 














非常 好 ! 
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6.7.7 ”适应 小 微 屏幕 


好 像 Bootstrap 的 响应 式 网 格 与 图 片 墙 结合 起 来 ,在 某 些 浏览 器 的 小 微 屏 幕 下 会 发 生 冲 突 。 
至 少 我 在 测试 的 过 程 中 ， 发 现在 小 微 屏幕 里 ， 这 些 图 片 不 再 受 控 ， 都 显示 得 非常 大 。 

这 是 因为 Bootstrap 的 col1-sm- 和 col-1g- 类 对 小 微 屏 幕 不 再 适用 。 因 此 ，hrevievw 缩 
络 图 及 相应 的 图 片 完全 不 再 受 约束 。 

此 时 ， 我 们 有 两 个 选择 : 

O 给 每 个 评论 添加 co1-12 类 ; 

a 写 一 点 LESS 添加 约束 。 

如 何 做 取决 于 你 。 对 于 我 来 说 ， 我 选择 第 二 种 方式 。 

为 此 ， 我 只 要 在 在 _page-contents.less 中 再 添加 一 个 媒体 查询 : 


Gmedia (max-width: Gscreen-xs-max) ( 


在 这 个 媒体 查询 中 ， 我 们 来 限制 aiv class="reviews" 的 最 大 宽度 为 400px。 这 个 值 
既 保证 图 片 足够 大 ,也 不 会 让 它们 太 大 。 我 们 再 使 用 .center-block O 混 人 为 评论 加 入 
自动 的 左右 外 边 距 ， 从 而 实现 居中 。 全 部 代码 如 下 所 示 : 


#impact { 
Gmedia (max-width: @screen-xs-max) ( 
.reviews ( 
max-width: 400px; 
.center-block(); 
} 
} 



























































} 
保存 文件 ， 编 译 并 刷新 浏览 器 。 

好 啦 ， 用 户 评论 部 分 已 经 完全 达到 客户 要 求 。 
现在 我 们 继续 最 后 一 个 部 分 吧 。 








6.8 吸引 人 的 价目 表 
我 们 再 来 看 一 眼 客户 提供 的 设计 图 ， 看 看 客户 期 望 的 结果 是 什么 样 的 ; 
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6.8.1 





Sign up now! 





PREMIUM PLAN 
BASIC PLAN $ PRO PLAN 
epee Feature Name irn 


BE  à3—3Á  EELLEN 











我 们 得 考虑 一 下 要 完成 这 个 结果 需要 做 什么 ， 在 不 同 的 视 口 中 又 需要 如 何 调整 它们 的 
布局 。 


准备 变量 、 文 件 和 标记 


如 前 面 的 屏幕 截图 所 示 ， 这 个 设计 方案 中 涉及 几 个 表格 。 我 们 可 以 先 从 调整 与 表格 相关 
的 几 个 变量 开始 。 这 些 变量 都 在 _variables.less 中 。 搜 索 表格 部 分 ， 然 后 调整 与 背景 、 强 
调 的 行 和 边框 相关 的 变量 ,调整 后 的 结果 如 下 所 示 : 

// Tables 


1/ a 


@table-bg: transparent; // overall background-color 
@table-bg-accent: hsla(0,0,1%,.1); // for striping 
Gtable-bg-hover: hsla(0,0,1%,.2); 

@table-bg-active: @table-bg-hover; 
@table-border-color: #ccc; // table and cell border 


保存 文件 ， 编 译 为 CSS， 然 后 刷新 页 面 ， 可 以 看 到 下 图 所 示 的 结果 : 
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Sign up now! 
Basic Plan Premium Plan Pro Plan 
$19 $29 $39 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 


























这 是 一 个 起 点 。 接 下 来 我 们 需要 写 更 具体 的 样式 。 


现在 ，_page-contents.less 文件 越 来 越 长 了 ， 而 我 们 眼前 的 任务 则 是 只 关注 表格 样式 。 为 
了 保存 这 些 样 式 ， 我 们 再 为 价目 表 创 建 一 个 LESS 文件 。 


(1) 在 less 文件 夹 中 创建 _pricing-tables.less。 
(2) 在  main.less 中 导入 _page-contents.less 的 后 面 导 入 这 个 文件 : 


QGimport " pricing-tables.less"; 
(3) 在 编辑 器 中 打开 _pricing-tables.less， 开 始 在 里 面 写 新 样式 。 
不 过 ， 在 写 新 样式 之 前 ， 我 们 还 是 先 来 看 看 表格 的 标记 。 











在 每 个 表格 标记 的 父 元 素 中 ， 我 们 已 经 应 用 了 下 面 的 类 : 


口 Package package-basic 
~ 一 QU package package-premium 





D package package-pro 


比如 ， 第 一 个 表格 ， 它 的 父 aiv 就 是 这 样 的 : 


«div class-"package package-basic col-md-4"> 
«table class="table table-striped"'» 


类 似 地 ， 第 二 和 第 三 个 表格 的 父 元 素 分 别 加 入 了 package package-premium 和 


package package-pro 类 。 


这 些 父 容器 通过 col-ma-4 也 提供 了 基本 的 布局 样式 ， 即 在 中 型 视 口 中 会 排 成 三 栏 。 
下 面 我 们 分 析 看 一 看 每 个 表格 的 标记 。 在 第 一 个 基本 配置 表 中 , 已 经 应 用 了 table-striped 


类 : 
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«table class="table table-striped"» 


这 个 表格 使 用 <theadq> 元 素 作为 最 顶层 的 包含 块 。 在 这 个 元 素 内 部 , 是 一 个 跨 两 列 的 <th>， 
其 中 包含 <n2> 标 题 ， 是 配置 名 称 ， 还 有 一 个 <div class="price">， 里 面 是 价格 : 


<thead> 
«tr» 
«th colspan-"'2"» 
«h2»2Basic Plan</h2> 
«div class-"price"»$19«/div» 
«fth 
</tr> 
</thead> 


再 后 面 是 包含 Sign up Now! 按 钮 的 tfoot 标签 : 


<tfoot> 
<tr><td colspan="2"><a href="#" class="btn">Sign up 
now!</a></td></tr> 
</tfoot> 


然后 是 tbody 标签 ， 包含 一 组 功能 列表 ,很 直观 ， 每 行 两 列 : 


<tbody> 
<tr><td>Feature</td><td>Name</td></tr> 
<tr><td>Feature</td><td>Name</td></tr> 
<tr><td>Feature</td><td>Name</td></tr> 
<tr><td>Feature</td><td>Name</td></tr> 
<tr><td>Feature</td><td>Name</td></tr> 
</tbody> 


最 后 ， 当 然 是 两 个 关闭 标签 : 


«/table» 
«/div»«!-- /.package .package-basic --» 


其 他 两 个 表格 的 结构 也 都 一 样 。 
这 就 是 我 们 下 一 步 工作 的 基础 。 




































































6.8.2 ”表格 头 


要 美化 所 有 表格 的 表格 头 元 素 ， 需 要 做 以 下 几 件 事 : 


口 居中 文本 ; 

口 添加 与 最 终 版 本 接近 的 中 性 灰 作 为 背景 颜色 ; 
口 把 字体 颜色 改 为 白色 ; 

口 把 n2 转换 为 大 写 ; 

口 增 大 价目 表 的 尺寸 ; 

口 给 表格 添加 必要 的 内 边 距 。 
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完成 以 上 美化 工作 ， 只 要 下 面 几 行 代 码 即 可 。 这 里 我 们 把 所 有 针对 表格 的 样式 都 放 到 
#signup 选择 符 中 : 





#signup ( 
table { 
border: lpx solid Gtable-border-color; 
thead th ( 


text-align: center; 
background-color: Ggray-light; 
color: #fff; 
padding-top: 12px; 
padding-bottom: 32px; 
h2 { 
text-transform: uppercase; 
} 
} 
} 
} 


简单 来 说 ,这 些 样式 完成 了 除 增 大 价目 表 尺寸 之 外 的 所 有 工作 。 我 们 可 以 在 这 个 基础 上 ， 
开始 添加 样式 ,仍然 在 #signup 选择 符 内 : 


.price { 
font-size: 7em; 
line-height: 1; 





) 
这 样 就 得 到 了 下 面 的 结 














这 就 跟 我 们 预期 的 结果 接近 了 ， 但 我 们 想 减 少 美元 符号 的 大 小 。 为 了 能 控制 到 它 ， 必 须 
在 标记 中 给 它 加 个 span 标签 : 


«em class-"price"»«span»$«/span»19«/em» 
别 忘 了 其 他 两 个 表格 也 要 如 法 炮制 。 
添加 新 标签 后 ， 可 以 把 相应 规则 般 套 在 .price 中 : 


.price { 

















span { 
font-size: .5em; 
vertical-align: super; 
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以 上 规则 就 缩小 了 美元 符号 为 原来 的 一 半 ， 并 且 顶 部 对 齐 。 
接 下 来 居中 结果 ， 需 要 给 父 .price 选择 符 添加 一 点 负 外 边 距 : 











.price ( 
margin-left: -0.25em; 

















下 面 的 屏幕 截图 就 是 现在 的 结果 : 














6.8.3 ” 表 体 和 表 脚 
同样 以 三 个 价目 表 为 目标 ,统一 作 如 下 调整 : 
口 给 功能 列表 添加 左 、 右 内 边 距 ; 
a 把 按钮 拉 伸 至 全 宽 ; 
口 增 大 按钮 代 寸 。 
用 下 面 的 规则 就 可 以 : 


#signup ( 
table { 


























tbody { 
td { 
padding-left: 16px; 
padding-right: 16px; 
} 
} 
a.btn { 
.btn-1g; 
display: block; 
width: 100%; 
background-color: @gray-light; 
color: #fff; 
} 
} 
} 


保存 文件 ， 编 译 到 CSS， 刷 新 浏览 器 。 应 该 可 以 看 到 下 面 的 结 
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6.8.4 





Feature Name 
Feature Name 
Feature Name 
Feature Name 
Feature Name 











公共 的 样式 完成 了 ， 接 下 来 可 以 考虑 差异 化 了 。 


为 不 同 的 价目 表 添加 不 同 的 样式 


我 们 先 来 给 不 同 的 价目 表 的 表 头 和 Sign up now! 按 钮 添加 预期 的 颜色 。 在 客户 给 我 们 的 设 
计 图 中 ，Basic 是 蓝 色 ，Premium 是 绿色 ，Pro 是 红色 。 下 面 我 们 将 选择 好 的 颜色 值 指定 
给 三 级 品牌 色 ， 如 下 所 示 : 






































Gbrand-primary: #428bca; 
Gbrand-secondary: d5cb85c; 
Gbrand-tertiary: #d9534f; 











设置 完 颜 色 变量 ， 就 可 以 将 它们 应 用 给 适当 的 表 头 和 按钮 了 。 此 时 要 用 到 前 面 给 每 个 表格 
的 父 元 素 添 加 的 特定 的 类 ,也 就 是 package-basic.package-premium fll package-pro: 


(1) f£ less/ pricing-tables.less 中 ， 新 写 一 段 注 释 : 


// Pricing Table Colors 





(2) 在 这 里 我 们 给 .package-basic 表 应 用 主 品牌 色 @brand-primary， 先 在 thead th 
元 素 中 试验 一 下 : 
#signup .package-basic table ( 
thead th ( 


background-color: QGbrand-primary; 


H 
(3) 然后 再 把 主 品牌 色 应 用 给 thead th 元 素 的 按钮 。 这 里 ， 我 们 还 使 用 了 bootstrap/ 
mixins.less 中 定义 的 .putton-variant () 混 入 给 :hover 和 :active 状态 应 用 样式 。 

这 个 混入 函数 接受 三 个 参数 : 颜色 、 背 景 颜色 和 边框 颜色 。 我 们 是 这 样 写 的 : 
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.btn ( 
.button-variant(4fff; Gbrand-primary; darken(G8brand-primary, 52)); 
} 
} 


(4) 编译 之 后 ， 这 个 简洁 的 混和 人 函数 就 会 给 按钮 及 其 悬 停 、 活 动 状态 生成 对 应 的 样式 ! 


、 ”要 了 解 .button-variant() 的 原理 ， 可 以 参考 bootstrap/mixins.less 中 
的 定义 ， 以 及 bootstrap/buttons.less 文件 ， 其 中 使 用 这 个 混入 函数 定义 了 
Bootstrap 默认 的 按钮 类 。 


(5) 现在 ， 需 要 对 .package-premium 表 重 复 上 述 过程 ， 只 不 过 这 次 要 使 用 @brand- 


secondary 变量 


#signup .package-premium table ( 
thead th ( 
background-color: Gbrand-secondary; 
} 
.btn { 
.button-variant (#fff; Gbrand-secondary; darken(Gbrand-secondary, 5%)); 


} 

















(6) 最 后 ， 再 给 .package-pro 表 应 用 第 三 品牌 色 @brand-tertiary: 











#signup .package-pro table { 
thead th { 
background-color: @brand-tertiary; 
} 
.btn ( 
.button-variant(4fff; Gbrand-tertiary; darken(Gbrand-tertiary, 5$)); 


) 
C) 保存 文件 ， 编 译 为 CSS， 刷 新 浏览 器 。 应 该 看 到 应 用 了 新 颜色 的 表格 ， 如 下 图 所 示 : 
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BASIC PLAN PREMIUM PLAN PRO PLAN 
Feature Name 

Feature Name Feature Name Feature Name 

Feature Name Feature Name Feature Name 

Feature Name Feature Name Feature Name 

Feature Name Feature Name Feature Name 








非常 好 ! 
好 了 ， 接 下 来 解决 不 同 视 口 适 配 的 问题 。 
6.8.5” 适 配 小 视 口 


由 于 Bootstrap 3 对 响应 式 设计 的 重视 ， 我 们 的 表格 在 视 口 断 点 切换 时 都 表现 得 很 好 。 前 
面 已 经 看 到 在 中 级 宽度 视 口中 表格 的 表现 了 ， 下 面 再 看 看 在 视 口 更 宽 时 表格 的 布局 : 


EJ 








Name Name 

Name Feature Name Name 

Feature Name Feature Name Feature Name 
Feature Name Feature Name Feature Name 
Feature Name Feature Name 





Feature Name 
mm 





ERMOF, KEEPER, WPÉEDR. UDdET RSS: 
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BASIC PLAN 


s19 





Feature Name 
Feature Name 
Feature Name 
Feature Name 
Feature Name 


PREMIUM PLAN 


$29 





Feature Name 
Feature Name 
Feature Name 
Feature Name 
Feature Name 


PRO PLAN 





Feature Name 
Feature Name 
Feature Name 
Feature Name 
Feature Name 
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可 是 ,在 大 约 480~992px 之 间 的 时 候 ， 表 格 会 扩展 到 与 屏幕 一 样 宽 。 很 明显 ， 这 时 候 就 
太 宽 了 ， 如 下 图 所 示 : 





BASIC PLAN 


$19 


PREMIUM PLAN 





Feature Name 








因为 只 有 三 个 表格 ， 所 以 不 可 能 考虑 两 栏 布局 的 方案 。 只 能 限制 表格 宽度 ， 并 使 用 自动 
的 左 、 右 外 边 距 使 它们 居中 。 我 们 使 用 max-width 为 escreen-sm-max 的 媒体 查询 ， 
把 表格 的 最 大 宽度 设置 为 400px， 再 使 用 .center-block() 让 表格 居中 : 


// 
// Constrain width for small screens and under 
VO A St i nsence senile een 


Gmedia (max-width: Gscreen-sm-max) ( 
d$signup .package ( 
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max-width: 400px; 
.center-block(); 
H 
} 


保存 文件 ， 编 译 为 CSS， 然 后 刷新 浏览 器 。 应 该 可 以 看 到 宽度 受 限 的 表格 在 窗口 内 居中 
了 ， 如 下 图 所 示 : 








Sign up now! 





BASIC PLAN 

$19 
Feature Name 
Feature Name 
Feature Name 
Feature Name 
Feature Name 


此 时 ， 三 个 表格 有 了 差异 ， 而 且 具 备 了 响应 性 。 可 是 ， 还 差 一 点 呢 。 在 中 、 大 视 口 ， 我 
们 希望 Premium 方案 能 够 更 突出 。 








6.8.0 ”突出 重要 的 表格 


再 看 一 腿 设计 图 ， 就 会 发 现 我 们 的 设计 应 该 达到 目标 : 至 少 在 桌面 级 视 口 中 ， 中 间 档 价 
目 表 的 文字 应 该 更 大 ， 而 且 从 视觉 上 应 该 在 男 外 两 个 表格 的 上 方 ， 如 下 图 所 示 。 
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PREMIUM PLAN 
BASIC PLAN $ PRO PLAN 
e" Feature Name rid 


I —— à85 EE 








这 个 效果 通过 调整 内 边 距 、 外 边 距 和 字号 就 可 以 实现 。 
我 们 要 在 针对 中 大 视 口 的 媒体 查询 中 添加 样式 : 


// 
// Visually enhance the premium plan 


Gmedia (min-width: Gscreen-md-min) ( 


} 


在 这 个 媒体 查询 中 , 我们 首先 减少 Basic 和 Pro 表 ( 即 第 一 和 第 三 个 表 ) 的 宽度 ， 再 给 它 
们 添加 一 些 上 外 边 距 ， 将 它们 向 下 推 一 下 : 


// Size down the basic and pro 
#signup .package-basic table, 
#signup .package-pro table ( 
width: 90$; 
margin-top: 36px; 


) 
接 下 来 增 大 Premium 表 的 字号 ， 并 为 其 按钮 添加 内 边 距 : 


// Size up the premium 
#signup .package-premium table ( 
thead th ( 
font-size: 1.5em; 
h2 ( 
font-size: 1.5em; 
} 
} 
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acbtm.i 
font-size: 2em; 
padding-top: 24px; 
padding-bottom: 24px; 
} 
} 


这 样 得 到 的 结果 跟 预 期 目标 已 经 接近 了 ， 如 下 图 所 示 : 








PREMIUM PLAN 
BASIC PLAN 
= 





Sign up now! 


下 一 个 目标 就 是 让 三 个 表格 靠近 一 些 。 为 此 ， 就 要 对 外 边 距 进行 一 些 调整 ， 再 用 一 用 
z-index 属性 : 











// Squeeze tables together 

#signup .package-basic ( 
margin-right: -58px; 
margin-left: 58px; 
z-index: 1; 

} 

#signup .package-premium ( 
z-index: 1000; 

} 

#signup .package-pro { 
margin-left: -30px; 
z-index: 1; 


) 
解释 一 下 上 面 的 规则 吧 。 
口 使 用 负 的 右 外 边 距 把 (AMAY) BASIC PLAN 表 向 右 推 ， 同 时 用 等 量 的 左 外 边 距 抵消 


它 ， 以 保持 三 个 表格 的 相对 位 置 不 变 。 
口 使 用 负 的 左 外 边 距 把 (AMA) PRO PLAN RHEW, 6 
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O 调整 所 有 表格 的 z-index 值 ， 让 左 、 右 两 个 表 位 于 中 间 的 表 底下 。 


关于 z-index, 可 以 参考 这 篇 文章 : http://css-tricks.com/almanac/properties/ 
S Z/z-index/。 





下 面 的 屏幕 截图 显示 了 在 中 等 宽度 视 口中 的 效果 : 


BASIC PLAN Vibes ai PRO PLAN 
"9 329 








Feature Name 

Feature Name Feature Name 
Feature Name 

Feature Name Feature Name 
Feature Name 

Feature Name Feature Name 
Feature Name 


Feature Name Feature Name 
Feature Name 
Sign up now! 








快要 完工 了 。 接 下 来 只 需要 再 对 Basic 表 在 下 一 个 更 大 的 断 点 作 一 调整 。 在 上 一 个 媒体 查 
询 后 面 再 写 一 个 新 的 媒体 查询 : 
Gmedia (min-width: Gscreen-lg-min) ( 
d$signup .package-basic ( 
margin-right: -65px; 
margin-left: 65px; 
} 
} 


保存 文件 ， 编 译 到 CSS， 刷 新 浏览 器 。 应 该 看 到 1200px 及 更 大 的 视 口 中 的 效果 如 下 : 
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6.9 





Feature 








PREMIUM PLAN 

BASIC PLAN PRO PLAN 

Feature Name € e Feature Name 
Name 


Feature Name Feature Name 
Feature 
-——— 





就 这 样 了 ! 至 此 ， 我 们 完成 了 客户 给 我 们 提出 的 最 后 一 个 要 求 。 
现在 ， 从 整体 角度 做 一 些 修 饰 和 调整 的 工作 。 


最 后 的 调整 


本 节 ， 我 们 将 从 增强 页 面 整体 性 的 角度 出 发 ， 再 做 一 些 细节 的 调整 。 首 先 ， 给 页 面 中 的 
每 个 部 分 的 ni 标题 增加 必要 的 上 、 下 内 边 距 ， 并 增 大 字号 。 然 后 , 再 增强 一 下 导航 的 体 
验 ， 即 给 导航 条 添加 ScrollSpy 并 使 用 jQuery 将 点 击 导航 后 的 滚动 过 程 变 成 动画 。 


先 来 增强 各 部 分 的 主 标题 。 现 在 看 一 下 这 些 标题 ， 你 会 发 现 它们 很 不 起 眼 。 比 如 ， 就 以 


Features 部 分 为 例 吧 : 





Features 


Feature 1 





Feature 2 








我 们 的 增强 方案 是 降低 其 对 比 度 ， 增 大 其 内 边 距 。 我 们 只 想 把 规则 应 用 给 FEATURES、 


IMPACT 和 SIGN UP， 因 此 可 以 通过 ID 选择 它们 。 
(1) 在 编辑 需 中 打开 _ page-contents.less。 
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(2) 在 文件 顶部， 在 给 页 面 主体 应 用 上 内 边 距 的 规则 之 后 ， 添 加 以 下 代码 : 


#features, #impact, #signup ( 
padding-top: 36px; 
padding-bottom: 48px; 
h1 { 

font-size: 5em; 
color: @gray; 
line-height: 1.3; 
padding-bottom: 24px; 
} 

} 


(3) 以 上 规则 做 的 事情 如 下 : 

O 给 这 些 部 分 添加 上 、 下 内 边 距 ; 

口 显著 增 大 ni 标题 的 字号 ; 

Q 减少 标题 的 对 比 度 ; 

口 通过 设置 行 高 和 下 内 边 距 ， 保 证 标题 周围 的 空间 合适 。 
(4) 保存， 编译， 刷新 ， 看 看 有 什么 不 一 样 : 











Features 








Feature 1 Feature 2 
Donec id elit non mi porta gravida at eget Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus metus. Fusce dapibus, tellus ac cursus 
commodo. commodo. 





这 些 变化 会 体现 在 所 有 视 口 大 小 的 页 面 中 。 对 于 小 视 口 ， 目 前 的 hl 太 大 了 。 另 外 , 我 们 
还 需要 添加 一 些 左 、 右 外 边 距 。 因 此 还 要 继续 调整 一 下 。 我 们 不 想 让 后 面 的 样式 影响 大 
视 口 下 的 布局 ， 所 以 得 把 它们 封装 到 一 个 媒体 查询 中 : 


// Adjust section headings for extra-small viewports only 
@media (max-width: @screen-xs-max) { 
#features, #impact, #signup { 
margin-left: 30px; 
margin-right: 30px; 
h1 ( 
font-size: 3em; 
} 
j 
} 
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下 面 的 屏幕 截图 展示 了 调整 后 的 效果 : 





Features 


Feature 1 


Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 
commodo. 


Feature 2 


Donec id elit non mi porta gravida at eget 
metus. Fusce dapibus, tellus ac cursus 
commodo. 











改进 很 大 。 
接 下 来 我 们 改进 导航 的 体验 。 


6.10 “为 导航 条 添加 ScrollSpy 


我 们 要 配置 顶部 的 导航 条 ， 令 其 对 应 页 面 中 的 位 置 。 下 面 给 导航 条 添加 Bootstrap 的 
ScrollSpy: 


ŞS 这 里 是 Bootstrap ScrollSpy 插件 的 文档 : http://getbootstrap.com/javascript/ 
#scrollspy。 


(1) 在 编辑 器 中 打开 index.html。 
(2) 给 body 标签 添加 下 面 的 ScrollSpy 属性 : 


«body data-spy="scroll" data-target-".navbar"- 





假如 页 面 中 包含 多 个 导航 条 ， 需 要 在 data-target 属性 中 具体 指出 
CON 或 许 得 为 ScrollSpy 导航 条 添加 一 个 ID ,比如 id2"navbar-primary", 


然后 将 这 个 ID 作为 data-target 属性 的 值 。 e 
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(3) 设置 了 这 些 属 性 后 ， 保 存 文件 ， 刷 新 浏览 器 ， 点 击 导 航 ， 会 发 现 主导 航 能 够 定位 到 页 
面 中 对 应 的 位 置 ， 如 下 图 所 示 : 














Bootstroppin NTRO FEATURES — 


Impact 


Lorem ipsum dolor sit 
amet, consectetur 
adipiscing elit. Proin 
euismod, nulla pretium 
commodo z 

oC ustomeri 


Lorem ipsum dolor sit amet 
vriingiBustomernsz 


Lorem ipsum dolor sit amet, 


consectetur adipiscing elit. 
Proin euismod, nulla 
pretium commodo ultricies 





s RA H 动画 


下 面 给 点 击 导航 后 的 页 面 滚动 添加 动画 ， 为 此 需要 在 main.js 文件 中 添加 几 行 代码 。 


(1) 在 编辑 需 中 打开 js/main.js。 
(2) Æ$ (document).ready(function() { 中 添加 以 下 代码 : 


S$('4navbar [href^-s$]').click(function (e) ( 
e.preventDefault(); 
var div = $(this).attr('href'); 
$("html, body").animate(( 
scrollTop: $(div).position().top 
), "slow"); 


D); 
(3) 保存 并 刷新 浏览 
刚才 的 代码 做 了 什么 ? 我 们 使 用 jQuery 做 了 以 下 几 件 事 。 


O 选择 了 .navbar 元 素 中 以 页 面 位 置 中 的 锚 为 目标 的 链接 ; 
口 阻 止 了 默认 的 单 击 行为 ; 
O 将 滚动 过 程 变 成 动画 ， 设 置 了 动画 速度 为 slow。 


单 击 某 个 导航 项 ， 应 该 可 以 看 到 滚动 动画 了 ! 
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6.11 








小 结 
花 点 时 间 前 后 翻阅 一 下 页 面 ， 欣 赏 -一 下 各 个 部 分 的 细节 ， 调 整 -一 下 窗口 ， 看 看 布局 的 响 
应 性 如 何 。 
想 一 想 ， 一 个 页 面 就 实现 了 那么 多 功能 ， 而 且 它 能 够 适 配 桌面 浏览 器 、 平 板 浏览 器 和 手 


机 浏览 




















， 应 该 有 不 小 的 成 就 感 吧 


下 面 来 回顾 一 下 ， 我 们 的 客户 向 我 们 提出 了 设计 一 个 单 页 营销 站 点 的 要 求 : 











O 使 用 Bootstrap 高 清 图 样式 的 大 字 欢 迎 语 ， 背 景 图 片 十 分 抢眼 ， 而 且 具 有 响应 能 力 ; 

口 使 用 Font Awesome 图 标的 功能 列表 ; 

口 图 片 墙 网 格 的 用 户 赞 洽 ， 同 样 完 美 适 配 各 种 视 口 ; 

口 注 册 区 使 用 Bootstrap 的 表格 样式 ， 并 自 定义 了 中 档 价目 表 ， 其 在 中 、 大 视 口 中 更 加 
突出 ; 

口 使 用 ScrollSpy 和 jQuery 增强 了 导航 条 ， 并 添加 了 动画 滚动 效果 。 














实现 了 上 述 设计 之 后 ， 应 该 说 ， 没 有 什么 是 我 们 不 能 通过 Bootstrap 实现 的 了 。 
做 完 本 章 和 前 面 几 童 的 项 目 ， 相 信 你 一 定 有 了 很 大 收获 。 总 结 一 下 吧 : 


























o 掌握 了 Bootstrap 的 所 有 细节 ; 

口 把 Bootstrap LESS 和 JavaScript 整合 进 我 们 的 项 目 文件 ; 

口 把 Bootstrap 的 glyphicons 替换 成 了 更 丰富 的 Font Awesome 图 标 字 体 ; 

口 对 Bootstrap 的 样式 进行 自 定 义 和 调 整 ， 从 而 达到 对 设计 结果 的 精确 控制 。 





不 要 忘 了 ， 在 本 书 的 附录 部 分 ， 还 有 针对 所 有 项 目的 指南 。 比 如 ， 针 对 上 线 部 署 优化 
Bootstrap 的 资源 〈 附 录 A )， 利 用 当前 最 新 技术 实现 响应 式 图 片 ( 附录 B )， 给 传送 带 添 
加 手势 (附录 C )。 


除 此 之 外 ， 还 有 很 多 优秀 的 资源 可 供 我 们 进一步 探索 Bootstrap。 其 中 ，Bootstrap 社区 就 








是 一 个 非常 活跃 和 值得 关注 的 地 方 。Bootstrap 无 疑 是 Web 前 端 发 展 史 上 的 一 座 里 程 碑 ， 


值得 我 们 学 习 。 
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A.1 


优化 站 点 资源 


速度 很 重要 。 用 户 很 关心 。 我 们 的 站 点 必须 加 载 够 快 ， 否 则 用 户 就 会 走 人 。SEO 也 很 重 
要 。 我 们 的 站 点 必须 加 载 够 快 ， 否 则 搜索 排名 就 会 下 降 。 

明白 了 这 些 ， 我 们 就 来 清点 一 下 第 2 章 人 个 作品 站 点 中 的 资源 。 特 别 地 ， 来 看 一 看 我 们 
能 控制 的 、 影 响 页 面 速度 的 重要 因素 一 一 文件 大 小 ， 包 括 图 片 、CSS 和 JavaScript 文 件 。 
只 要 简单 几 步 ,我 们 就 可 以 给 这 些 文件 “瘦身 ”， 缩 短 加 载 时 间 。 











优化 图 片 


这 些 图 片 都 通过 Photoshop 的 “保存 为 Web 格式 ”进行 了 一 定 程度 的 优化 。 但 是 ， 所 有 
图 片 加 在 一 块 ， 也 有 856 KB. 























] img -- 


二 alittlecode.jpg 149 KB 
E! bso.jpg 169 KB 
= logo.png 19 KB 
= okwu-athletics.jpg 230 KB 
£4 okwu.jpg 267 KB 








Kind: Folder 
Size: 841,127 bytes (856 KB on disk) 
for 6 items 























这 些 图 片 很 重要 。( 毕竟 是 个 人 作品 站 点 啊 。) 可 是 ， 这 个 体 量 也 确实 大 了 一 些 。 附 录 B 
还 会 向 大 家 介绍 一 种 响应 式 图 片 技术 ， 可 以 进一步 减少 小 屏幕 设备 中 的 文件 大 小 。 不 过 
即使 不 用 该 技术 ， 通 过 更 有 效 的 压缩 ， 照 样 还 能 减少 文件 大 小 。 

要 减少 文件 大 小 , 同时 又 不 会 损害 图 片 质量 , 可 以 使 用 一 些 工 具 , 比如 Yahoo! 的 Smushit: 
http://www.smushit.com/, 

对 于 Mac H, 免费 的 ImageOptim 应 用 ( http;//imageoptim.com/ ) 也 能 达到 类 似 的 目的 。 
使 用 该 应 用 ， 可 以 把 整体 大 小 减少 29 KB。 


ls 
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eoo ImageOptim 

File Size Savings 
€3 bso.jpg 169,393 0% 
€3 logo.png 19,178 0% 
®© okwu-athletics.jpg 218,755 5.1% 
© okwu.jpg 251,215 5.9% 
€3 alittlecode.jpg 149,079 096 
[4] Saved 27.4KB out of 835KB. 3.35 overall (up to 5.95 per file) | e Again | 

这 个 成 果 并 不 十 分 明显 ， 但 能 小 些 总 是 好 的 。 





优化 CSS 
先 看 看 未 优化 的 样式 表 main.css 的 文件 多 大 : 





| css 
lI main.css 137 KB 


137 KB! 任何 负责 任 的 开发 者 都 不 会 让 这 么 一 个 小 网 站 带 那 么 大 的 样式 表 。 

好 消息 是 ， 我 们 可 以 轻易 把 这 个 大 小 减 半 。 利 用 Bootstrap 的 模块 化 LESS 方案 ， 可 以 立 
即 缩小 CSS， 步 又 如 下 。 

(1) 打开 less/ main.less; 

(2) 注释 掉 不 需要 的 LESS 文件 ， 比 如 这 些 : 


// Qimport "bootstrap/glyphicons.less"; 




















// Qimport "bootstrap/dropdowns.less"; 
// Qimport "bootstrap/button-groups.less"; 
// Qimport "bootstrap/input-groups.less"; 


// Qimport "bootstrap/breadcrumbs.less"; 
// Qimport "bootstrap/pagination.less"; 
// Qimport "bootstrap/pager.less"; 

// Qimport "bootstrap/labels.less"; 

// Qimport "bootstrap/badges.less"; 

// Qimport "bootstrap/jumbotron.less"; 
// Qimport "bootstrap/thumbnails.less"; 
// Qimport "bootstrap/alerts.less"; 
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// Qimpotrt "bootstrap/progress-bars.less"; 


// Qimpor 
// (impor 
// Qimpor 
// Qimpor 
// Qimpor 


ct cec cg ceo ere 


"bootstrap/media.less"; 
"bootstrap/list-group.less"; 
"bootstrap/panels.less"; 
"bootstrap/wells.less"; 
"bootstrap/close.less"; 


// (import "bootstrap/modals.less"; 
// (import "bootstrap/tooltip.less"; 
// (import "bootstrap/popovers.less"; 

















(3) 当然 得 小 心 一 点 ， 否 则 一 不 留神 就 可 能 注释 掉 必 要 的 文件 。 因 此 事后 要 花 点 时 间 重 编 





译 ， 全 面 测试 一 下 。 


(4) 注释 掉 不 必要 的 文件 后 ， 选 中 编译 需 中 的 最 小 化 〈 或 者 压缩 输出 ) 选项 ， 最 后 重 编译 















































一 遍 ， 保 存 为 css/main.css。 
(5) 再 看 看 文件 有 多 大 。 我 这 里 的 结果 是 只 剩 下 74 KB ， 相 当 于 原先 的 62%。 






































当然 ,你 还 可 以 优化 得 再 





细 一 些 。 比 如 , 可 以 打开 每 个 保留 的 LESS 文件 , 再 把 其 中 没有 


必要 的 代码 一 行 一 行 注 释 掉 。 这 些 练习 就 留 给 你 们 啦 ! 
最 后 ， 我 们 来 看 看 如 何 优化 JavaScript。 








优化 JavaScript 








为 优化 JavaScript， 我 们 要 把 plugins.js 文件 中 的 Bootstrap 插件 ， 替 换 成 只 剩 我 们 用 到 的 
几 个 。 然 后 再 重新 压缩 文件 。 








(1) 打开 js/plugins.js. 


(2) 删除 属于 bootstrap.min.js 的 代码 块 。 
(3) 打开 js/bootstrap 文件 来， 这 里 面 保存 着 Bootstrap 插件 的 独立 文件 。 逐 个 打开 下 列 文 
件 ， 将 它们 的 代码 复制 到 plugins.js 文件 里 ， 这 三 个 插件 是 我 们 网 站 中 用 到 的 : 











口 carousel.js 
口 collapse.js 


O transition.js 





























(4) 保存 “瘦身 ”版 的 pluginsjs 文件 ， 刷 新 浏览 器 进行 测试 。 











口 确保 响应 式 导 航 条 在 窗 视 口中 能 够 折 琶 ， 并 且 单 击 按钮 可 以 展开 下 拉 列 表 ; 
口 确保 传送 带 一 切 如 常 。 





如 果 都 没有 问题 ， 说 明 已 经 包含 了 所 需 的 JavaScript. 
(5) 下 一 步 可 以 缩小 (minify ) zX "3145" Cuglify) plugins.js 文件 了 。 建 议 使 用 下 列 在 线 


TR 


—— 7N o 
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A.4 


CQ UghfyJS: http://marijnhaverbeke.nl/uglifyjs 
口 YUI Compressor: http://refresh-sf.com/yui/ 
O 谷歌 的 Closure Compiler: http://closure-compiler.appspot.com/ 











打开 这 些 在 线 工具 ， 把 pluginsjs 的 代码 复制 过 去 ， 运 行 ， 再 把 得 到 的 代码 复制 回 


plugins.jso 























我 们 在 这 里 选用 CodeKit， 是 Mac 的 一 款 付费 应 用 : http://incident57.com/codekit/。 


(6) 保存 压缩 后 的 文件 。 
(7) 比较 文件 大 小 。 


为 对 比方 便 ， 我 为 所 有 文件 保存 了 备份 : 


口 plugins-alljs 包含 完整 的 bootstrap.min.js 代码 ; 

O plugins-uncompressed.js 包含 我 们 需要 的 三 个 插件 ， 未 压缩 ; 
O plugins.js 是 最 终 文件 ， 缩 小 并 去 空格 串联 的 版 本 。 

下 图 展示 了 这 几 个 文件 大 小 的 对 比 : 

















æ plugins-all.js 28 KB 
it! plugins-uncompressed.js 14 KB 
if plugins.js 8 KB 





最 终 文件 只 相当 于 原来 的 三 分 之 一 ! 





优化 结果 


总 体 来 看 ,我 们 的 优化 工作 取得 了 成 效 。 把 图 片 、CSS 和 JavaScript 都 算 一 块 ， 原 来 的 大 





小 是 1021 KB, 
优化 之 后 ， 变 成 了 909KB ， 节 省 了 112 KB， 超 过 了 10%。 











而 如 果 单 看 CSS 和 JavaScript， 则 节省 幅度 超过 了 50%。 这 个 差别 就 很 大 了 ,其 效果 迟早 





会 显现 。 


事实 上 ， 我 们 还 能 够 继续 优化 ， 尤 其 是 针对 小 屏 设 备 ， 方 法 就 是 实现 响应 
响应 式 图 片 ， 我 们 会 留 在 附录 B 里 讨论 。 
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图 片 。 关 于 


B.1 


实现 响应 式 图 片 





如 果 我 们 对 承 移动 友好 的 开发 宗 卢 ,那么 就 需要 选择 一 种 响应 式 图 片 技术 。 在 这 个 附录 
中 ， 我 们 会 基于 目前 比较 前 沿 的 技术 ,来 提升 第 2 章 个 人 作品 站 点 中 作品 图 片 传送 带 的 
性 能 和 设计 。 














分 析 作 品 传送 带 

在 第 2 章 的 个 人 作品 网 站 中 ， 传 送 带 中 的 图 片 是 为 全 宽 布 局 设计 的 ， 宽 度 是 1600px, K 
小 为 135~189KB。 把 这 么 大 的 图 片 发 送 到 手机 和 非 视网膜 屏 的 平板 就 过 分 了 。 在 移动 优 
先 响应 式 设计 的 时 代 ， 这 样 做 又 是 不 负责 任 的 。 

而 且 ， 如 果 再 看 一 看 小 屏幕 中 的 显示 效果 ， 你 可 能 会 发 现 传送 带 中 的 图 片 应 该 更 高 点 、 
罕 点 才 好 ， 因 为 窄 屏幕 垂直 方向 上 空间 相对 富余 一 些 。 

在 手机 屏幕 那么 宽 的 视 口 中 ,我 们 的 图 片 ， 为 大 屏幕 准备 的 图 片 ， 是 可 以 显示 ， 但 如 果 
能 够 更 多 利用 垂直 空间 ， 效 果 会 更 好 。 这 一 点 通过 下 面 的 屏幕 截图 可 以 看 出 来 : 
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B.2 











Bootstrappin’ 





Welcome! 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In non purus 
quis elit iaculis tincidunt. Donec at ultrices est. 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. 
Suspendisse potenti. Ut porta rhoncus ligula, 
sed fringilla felis feugiat eget. In non purus 
quis elit iaculis tincidunt. Donec at ultrices est. 








Af Bu s A Hr BOR, 应 该 能 让 我 们 为 小 屏幕 提供 适当 的 图 片 ， 满 足 小 文件 、 快 速 加 载 ， 
以 及 改进 设计 的 要 求 。 


选择 方案 

响应 式 图 片 技术 的 标准 还 在 制定 过 程 中 。 但 目前 还 没有 哪 家 的 方案 被 采用 ， 浏 览 器 也 没 
有 都 实现 哪 一 种 手段 。 为 此 ， 当 前 最 好 的 技术 要 么 是 服务 器 端 技 术 ， 要 么 是 客户 端 技术 。 
Smashing 杂志 发 表 过 一 篇 不 错 的 文章 叫 Choosing a Responsive Image Solution , 作者 Sherri 
Alexander。 这 篇 文章 介绍 了 前 沿 的 几 种 技术 方案 ， 大 家 有 时 间 可 以 看 一 看 ， 地 址 是 : 
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/。 


在 这 篇 文章 乃至 其 他 文章 中 ，Scott Jehl 的 Picturefill 技术 都 被 推崇 为 一 个 不 错 的 方案 。 这 
是 因为 Picturefill 方案 较 好 地 平衡 了 性 能 和 设计 问题 ， 而 且 方 案 也 相当 简明 。 
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Picturefill 实现 响应 式 图 片 只 需 简单 几 步 : 


(1) 准备 好 针对 目标 视 口 的 理想 图 片 ; 
(2) 下 载 并 包含 Picturefill 的 JavaScript 文件 ; 
(3) 用 Picturefill 的 标记 模式 来 引入 图 片 。 


一 如 往常 ， 实 际 开 发 过 程 还 有 两 个 步骤 : 
口 测试 ; 

O 按 需 调整 。 

下 面 我 们 就 一 步 一 步 来 做 。 





B.2.1 准备 响应 式 图 片 


打开 本 附录 的 练习 文件 , 你 会 发 现 img 文件 夹 中 包含 了 一 些 特殊 尺寸 和 经 过 优化 的 图 片 。 
特别 是 其 中 一 些 带 -sm.jpg 后 缀 的 图 片 : 





æ bartlesvillecf-sm.jpg 


= bartlesvillecf.jpg 


emancipation-sm.jpg 


= emancipation.jpg 


logo.png 
okwu-athletics-sm.jpg 


=œ okwu-athletics.jpg 


E3 okwu-sm.jpg 


= okwu.jpg 


打开 这 个 图 片 ， 会 发 现 它 们 更 窄 一 些 ， 长 宽 比 更 小 。 这 是 为 了 像 下 面 这 样 在 罕 视 口中 更 
多 利用 垂直 空间 : 
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bj los" 
DOWELL 








当然 ， 图 片 也 小 一 些 ，900px x 600px， 保 证 在 视网膜 屏 中 也 能 有 足够 的 像素 ， 但 比 起 最 
初 的 1600px x 800px 就 小 多 了 。 这 些小 图 片 平均 都 比 原来 的 大 图 片 小 50% 以 上 。 


具体 的 大 小 可 以 参考 下 面 这 张 截 图 ， 注 意 以 -sm.jpg 结尾 的 小 图 : 











= bartlesvillecf-sm.jpg 71 KB 
= bartlesvillecf.jpg 135 KB 
= emancipation-sm.jpg 78 KB 
= emancipation.jpg 156 KB 
= logo.png 19 KB 
= okwu-athletics-sm.jpg 94 KB 
= okwu-athletics.jpg 189 KB 
= okwu-sm.jpg 93 KB 
= okwu.jpg 188 KB 





图 片 准 备 好 以 后 ， 接 下 来 该 JavaScript 上 场 了 。 
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B.2.2 使 用 JavaScript 


Picturefill 的 文件 及 文档 位 于 GitHub ， 地 址 是 : https://github.com/scottjehl/picturefill。 


大 家 可 以 花 点 时 间 看 看 文档 。 我 们 一 会 就 要 用 到 文档 中 推荐 的 元 素 。 但 现在 ,我 们 要 下 
载 JavaScript 文件 ， 然 后 用 到 我 们 的 项 目 中 。 好 ， 按 照 下面 的 步 又 操作 。 

(1) 在 Picturefill GitHub 的 代码 库 中 ， 找 到 并 下 载 picturefill.js。 

(2) 复制 文件 中 的 代码 ， 包 括 开头 的 注释 。 我 们 要 把 它 复制 到 plugins.js 文件 中 。 

(3) 打开 js/plugins.js, JE Picturefill 的 代码 贴 在 其 他 插件 之 前 或 之 后 ， 都 可 以 。 

(4) 保存 。( 当然 ， 在 部 署 的 产品 环境 之 前 ， 别 忘 了 最 小 化 和 压缩 plugins.js。 ) 


接 下 来 ， 按 照 Picturefill 的 约定 准备 标记 。 




















B.2.3 ”修改 标记 结构 


在 index.html 中 ， 修 改 每 张 图 片 的 标记 ， 使 用 Picturefill KE span 元 素 的 模式 。 这 里 的 
标记 默认 采用 小 图 片 ， 但 视 口 在 640px 及 以 上 的 浏览 器 和 IES 例外 。 
以 下 就 是 修改 后 第 一 张 图 片 的 标记 。 


«span data-picture data-alt-"OKWU Homepage"» 

















«span data-src-"img/okwu-sm.jpg"»«/span» 
«span data-src-"img/okwu.jpg" data-media=" (min-width: 640px)"»«/span» 
<!--[if (lt IE 9) & (!IEMobile)]» 
«span data-src-"img/okwu.jpg"»«/span» 
<! [endif]--» 
<noscript> 








«img src-"img/okwu.jpg" alt-"OKWU Athletics Homepage"> 
«/noscript» 
</span> 


下 面 简单 解释 一 下 以 上 代码 。 

口 最 外 层 的 span 标签 使 用 aata-picture 属性 将 整个 元 素 标 记 为 响应 式 图 片 。 
口 data-alt 属性 中 包含 图 片 的 奉 代 文 本 。 

口 开 头 的 <span data-src .. .> 标签 指定 了 小 设备 使 用 的 默认 图 片 。 


O data-media 属性 用 于 指定 在 什么 条 件 下 使 用 大 图 片 。 在 这 里 ， 我 们 指定 的 是 
min-width: 640px, 也 就 是 只 有 视 口 宽度 超过 过 640px 时 才 会 加 载 大 图 片 。 

































































TL 正如 文档 中 所 说 ， 这 里 的 条 件 还 可 以 使 用 设备 像素 比 来 针对 高 密度 或 视 
~ 网 膜 屏 幕 。 


口 接 下 来 的 条 件 注释 可 以 确保 不 支持 媒体 查询 的 TES 加 载 大 图 片 。 
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口 最 后 的 no-script 元 素 中 包含 一 个 标准 的 img 标签 ， 只 会 在 浏览 器 不 支持 或 禁用 
JavaScript 时 显示 。 





要 了 解 更 多 ,请 大 家 参考 这 里 的 文档 : https://github.com/scottjehl/picturefill。 
接 下 来 ,请 大 家 依照 第 一 张 图 片 ， 为 其 他 图 片 也 添加 类 似 的 标记 。 


B.2.4 测试 与 调整 


保存 并 测试 , 你 会 发 现 这 一 次 传送 带 的 图 片 不 会 调整 适应 屏幕 宽度 了 。 这 是 因为 Picturefil 
的 标记 没有 使 用 Bootstrap 传送 带 样 式 中 的 Aon 5 


我 们 得 修改 carousel.less 文件 中 相应 的 选择 符 ， 好 让 图 片 撑 满 可 用 空间 ， 步 又 如 下 。 
(1) 打开 _carousel.less。 


(2) 搜索 到 下 面 的 代码 ， 把 > img 和 > a > img 子 选 择 符 ， 替 换 成 简单 的 后 代 img 选择 
符 ， 以 便 选中 现在 在 Picturefill kic Prisc e deren E Hr : 


// Account for jankitude on images 
// » img, // commented out 
//» a» img // commented out 
img ( // added to apply to PictureFill responsive image solution 
.img-responsive(); 
line-height: 1; 
min-width: 100$; // added 
height: auto; // added 
} 


问题 就 这 样 解决 了 1 


























B.3 最终 的 结果 
在 视 口 小 于 640px 时 ， 传 送 带 应 该 使 用 较 小 但 相对 较 高 的 图 片 。 
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Bootstrappin’ 


Welcome! 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 
In non purus quis elit iaculis tincidunt. Donec at ultrices est. 


Recent Updates 


Suspendisse et arcu felis, ac gravida turpis. Suspendisse 
potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. 
In non purus quis elit iaculis tincidunt. Donec at ultrices est. 





以 此 为 起 点 , 大 家 还 可 以 参考 Picturefil 的 文档 , 根据 需要 再 调整 和 适 配 自己 需要 的 版 本 。 
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C.1 


C.2 


让 传送 市 支持 手势 








在 触摸 屏 设备 中 ,支持 手势 轻 扫 来 切换 传送 带 图 片 是 一 个 非常 实用 的 功能 。 本 附录 将 为 
Bootstrap 的 传送 带 添 加 轻 扫 手势 支持 。 


有 什么 选择 


目前 ， 还 没有 跨 设 备 测试 触摸 手势 的 简便 方法 。 现 有 条 件 下 的 最 佳 实践 ， 就 是 要 保证 添 
加 的 手势 实用 ， 而 且 不 会 影响 标准 的 鼠标 事件 。 其 实 ， 如 果 要 让 传送 带 支 持 轻 扫 手 势 ， 
只 要 一 个 JavaScript 搬 件 和 几 行 代码 就 行 。 

Justin Lazanowski 专 门 为 实现 Bootstrap 3 传送 带 的 手势 交互 写 过 一 篇 文章 , 提 到 三 种 选择 。 
他 的 文章 在 这 里 ,大 家 可 以 自己 看 一 看 :http://lazcreative.com/blog/adding-swipe-support-to- 
bootstrap-carousel-3-0/。 
































心 























本 附录 将 使 用 jQuery 插件 TouchSwipe, GitHub 地 址 为 : https://github.com/mattbryson/ 
TouchSwipe-Jquery-Plugin。 


使 用 这 个 插件 ， 可 以 通过 下 列 步 又 让 传送 带 支 持 轻 扫 手 势 : 


(1) 把 TouchSwipe 插件 包含 到 我 们 的 插件 文件 中 ; 
(2) 在 main.js 文件 中 写 几 行 调用 代码 。 


很 简单 ， 下 面 我 们 来 做 。 


取得 并 包含 TouchSwipe 插 件 


按照 下 面 的 步骤 把 TouchSwipe.js 包含 到 我 们 的 插件 文件 中 。 

(1) 打开 TouchSwipe 的 GitHub 代码 库 :https://github.com/mattbryson/TouchSwipe-Jquery- Plugin。 
(2) 下 载 整个 代码 库 。 

(3) 找到 jquery.touchSwipe.min.js 并 复制 其 中 的 代码 。 

(4) 把 代码 粘贴 到 plugins.js 文件 中 ， 位 于 Bootstrap 插件 之 后 。 
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C.3 


(5) 保存 。 


插件 就 位 了 。 接 下 来 需要 调用 它 。 


调用 TouchSwipe 


需要 写 几 行 代码 , 命令 TouchSwipe 监听 传送 带 上 的 轻 扫 事件 ， 





Nod 


然后 将 其 转换 成 Bootstrap 





的 方法 调用 : .carousel('prev') 和 .carousel('next')。 关 于 这 些 方法 ， 大 家 可 以 
参考 Bootstrap 的 文档 : http://getbootstrap.com/javascript/#carousel。 


pi 


I3 





果 你 感 兴趣 ， 也 可 以 参考 TouchSwipe 的 文档 : http://labs.rampinteractive.co.uk/touchSwipe 





接 下 来 的 事 很 简单 ， 只 需 下 列 几 步 。 


(1) 打开 项 目 中 的 mainjs 文 件 。 
Q) 在 其 中 添加 如 下 代码 : 


//Enable swiping... 
$(".carousel-inner").swipe( { 
//Generic swipe handler for all directions 
swipeRight: function(event, direction, distance, duration, 
fingerCount) ( 


$ 
) 


this).parent().carousel('prev'); 


swipeLeft: function() ( 
S(this).parent().carousel('next'); 


) 


//Default is 75px, set to 0 so any distance triggers swipe 


n; 
Q) 保存 。 





threshold:0 





好 了 ， 如 果 你 在 触摸 屏 设 备 中 测试 网 站 ， 应 该 可 以 通过 左 、 右 轻 扫 来 切换 图 片 了 。 
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Bootstrappin 





么 简单 。 代 码 不 多 ， 但 很 实用 。 


E: 
E px 


祝贺 你 ， 你 的 Bootstrap 传送 带 支持 手势 了 。 
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欢迎 加 入 


图 灵 社 区 ITuring.cn 








最 前 沿 的 IT 类 电子 书 发 售 平台 


电子 出 版 的 时 代 已 经 来 临 。 在 许多 出 版 界 同 行 还 在 犹豫 稍 律 的 时 候 ， 图 灵 社 区 已 经 采取 实际 行 
动 拥抱 这 个 出 版 业 巨 变 。 作 为 国内 第 一 家 发 售 电子 图 书 的 IT 类 出 版 商 ， 图 灵 社 区 目前 为 读者 提供 两 种 
DRM-free 的 阅读 体验 : 在 线 阅 读 和 PDF。 

相 比 纸 质 书 ， 电 子 书 具有 许多 明显 的 优势 。 它 不 仅 发 布 快 ， 更 新 容易 ， 而 且 尽 可 能 采用 了 彩色 图 
片 《 即 使 有 的 书 纸 质 版 是 黑白 印刷 的 ) 。 读 者 还 可 以 方便 地 进行 搜索 、 剪 贴 、 复 制 和 打印 。 

图 灵 社 区 进一步 把 传统 出 版 流程 与 电子 书 出 版 业务 紧密 结合 ， 目 前 已 实现 作 译 者 网 上 交 稿 、 编 辑 





























网 上 审 稿 、 按 章 发 布 的 电子 出 版 模式 。 这 种 新 的 








以 较 快 的 速度 了 解 到 国外 最 新 技术 





时 ， 敏 捷 出 版 使 得 作 、 译 、 编 、 读 的 交流 更 为 方便 ， 可 以 提前 消灭 书稿 中 的 错误 ， 最 大 程度 地 保证 


书 出 版 的 质量 。 



























































图 书 的 内 容 ， 弥 补 以 往 翻 译 版 技术 书 “ 出 版 即 过 时 ”的 缺憾 。 





优惠 提示 : 现在 购买 电子 书 ， 读 者 将 获 赠 书 款 20% 的 社区 银子 ， 可 用 于 兑换 纸 质 样 书 。 





最 方便 的 开放 出 版 平台 





图 灵 社 区 向 读者 开放 在 线 写 作 功 能 ， 协 助 你 实现 自 出 版 和 开源 出 版 的 梦想 。 利 用 “合集 ” 功 














能 
你 就 能 联合 二 三 好 友 共 同 创作 一 部 技术 参考 书 ， 以 免费 或 收费 的 形式 提供 给 读者 。 (收费 形式 须 经 





























图 灵 社 区 立项 评审 。 ) 这 极 大 地 降低 了 出 版 的 门槛 。 只 要 你 有 写作 的 意愿 ， 图 灵 社 区 就 能 帮助 你 实 
这 个 梦想 。 成 熟 的 书稿 ， 有 机 会 入 选 出 版 计划 ， 同 时 出 版 纸 质 书 。 

都 将 在 立项 后 马上 在 社区 公布 。 如 果 你 有 意 翻译 哪 本 图 书 ， 欢 迎 
你 来 社区 申请 。 只 要 你 通过 试 译 的 考验 ， 即 可 签约 成 为 图 灵 的 译 者 。 当 然 ， 要 想 成 功 地 完成 一 本 书 的 





图 灵 社区 引进 出 版 的 外 文 图 书 ， 


























翻译 工作 ， 是 需要 有 坚强 的 角力 的 。 









































最 直接 的 读者 交流 平台 
在 图 灵 社 区 ， 你 可 以 十 分 方便 地 写作 文章 、 提 交 期 误 、 发 表 评 论 ， 以 各 种 方式 与 作 译 者 、 编 


























员 和 其 他 读者 进行 交流 互动 。 提 交 昌 











你 可 以 积极 参与 社区 经 常 开 展 的 访谈 、 乐 译 、 评 选 等 多 种 活动 ， 遍 取 积 分 和 银子 ， 积 累 个 人 声望 。 


TE] TRIP TERT o d ERI REA I 


误 还 能 够 获 赠 社 区 银子 。 
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版 模式 ， 我 们 称 之 为 “敏捷 出 版 ”， 它 可 以 让 读者 


同 
图 





, 


过 
现 


辑 人 


DHT 


关注 图 灵 教育 关注 图 灵 社区 
iTuring.cn 


版 ”电子 书 《 码 农 》 杂 志 
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— — QQ 联系 我 们 


读者 QQ 和 群 : 218139230 


微 博 联系 我 们 

















官方 账号 ，@ 图 灵 教 育 @ 图 灵 社 区 @ 图 灵 新 知 
市 场合 作 : ORRE 

写作 本 版 书 : @ 图 灵 小 花 

翻译 英文 书 ，@ 李 松 峰 @ 朱 闭 ituring @ 楼 伟 
翻译 日 文书 或 文章 : ORR 

翻译 韩文 书 ，@ 图 灵 陈 曦 
电子 书 合作 : Ghi jeanne 

图 灵 访 谈 /《 码 农 》 杂 志 : @ 李 盼 ituring 
加 入 我 们 ，@ 王 子 是 好 人 


Ta 




































































微 信 联系 我 们 


图 灵 教 图 灵 访 谈 
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本 书 是 目前 市 面 上 少见 的 实战 类 Bootstrap 图 书 ， 全 书 通过 5 个 真实 、 具 体 、 鲜 活 ， 又 有 代表 性 的 项 目 实例 ， 讲 解 了 
Bootstrap 的 各 种 特性 和 用 法 。5 个 实例 由 浅 入 深 ， 既 各 自 独立 ， 又 环 环 相 扣 ， 丰 富 的 代码 ， 精 美的 插图 ， 加 上 细致 入 
微 的 解释 ， 让 读者 极 易 上 手 ， 不 知 不 觉 中 就 能 掌握 所 有 重要 概念 ， 步 入 Bootstrap 高 手 行列 。 本 书 讲 解 了 以 下 5 种 类 型 
的 网 站 : ~ 7. 7 ， , 1 : ` I + pit Xu E r d rv 


除了 令 人 惊艳 的 项 目 实例 ， 本 书 还 向 读者 介绍 了 很 多 实用 插件 、 框 架 ， 以 及 前 端 开发 的 工作 流程 ， 这 些 知 识 和 技术 并 
不 局 限于 Bootstrap。 特 别 地 ， 作 者 用 相当 篇 幅 介 绍 了 LESS 的 基本 原理 和 使 用 方法 ， 让 即使 从 未 接触 过 LESS 的 人 也 能 
感觉 游 丸 有余。 此外， 全书 各 章 还 分 别 介绍 了 HTML5 Boilerplate, Font Awesome, Respond.js. Masonry. Scroll- 
Spy， 以 及 Roots 的 WordPress 启 动 主题 ， 让 读者 不 必 白 手 起 家 也 能 实现 各 种 酷 炫 效果 。 


本 书 附 录 还 介绍 了 为 获得 最 快 下 载 速度 而 对 站 点 资源 进行 优化 、 
实现 响应 式 图 片 ， 以 及 为 图 片 传送 带 添 加 手势 的 技术 。 作 者 提供 
的 项 目 代码 也 非常 完整 、 清 晰 ， 每 一 章 都 有 相应 的 开始 和 完成 文 
件 夹 ， 方 便 读者 参考 使 用 。 


本 书 适合 有 一 定 HTML/CSS 基 础 的 开发 人 员 和 爱好 者 阅读 学 习 ， 
经 验 丰 富 的 开发 人 员 也 可 以 把 它 当 作 参 考 。 
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